Vuexを使わずにログイン状態判定をカプセル化する方法についてお話します

この記事では、Vuex 状態管理を使用せずに、単純なカプセル化を使用してログイン状態を判断する方法を説明します。

プロジェクトではユーザーのログイン状態の判定が必ず発生するため、プロジェクト全体の用途に合わせてログイン状態の判定をカプセル化する必要があります。もちろん、今カプセル化を使用しないと、高結合、コードの冗長性、その他の結果が発生します。プロジェクトでは、ログイン ステータスを保存するために vuex ステータス管理がよく使用されます。プロジェクトがステータス管理を使用しない場合は、単純にカプセル化を使用してログイン状態を判断できます。 [関連する推奨事項: vue.js ビデオ チュートリアル ]

ログイン ステータスのカプセル化

ログイン ステータスを通常どおりカプセル化したい場合は、次の 2 つが必要です。つまり、保存されたトークンを取得する getToken と、そのトークンを使用してログインするかどうかを決定する isLogin 関数です。 src ディレクトリに新しいフォルダーを作成するか、リクエストをカプセル化するファイル ディレクトリ内の新しいフォルダー。auth.js で十分です。

getToken

トークンを取得するには、localStorage を使用してトークンを取得し、それを関数の値に返すだけです

export function getToken() {
  return localStorage.getItem("token");
}

isLogin

ログインを確認するには、getToken を呼び出してトークン値を取得し、ユーザーがログインしているかどうかを判断するブール値を返すだけです。 in

export function isLogin() {
  if (getToken()) {
    return true;
  }
  return false;
}

さらに、プロジェクトには getToken が使用される他の場所もあります。たとえば、トークンの値をリクエスト ヘッダーに転送する必要があるなどです。

利用方法

使用するもの オンデマンドでページに直接インポートすることができます。例えば、ここでは isLogin

import { isLogin } from "@/request/auth";

のみをインポートします。導入の後、誰かが「 if else を使用する必要がありますか?」と尋ねました。ノノノ、低いです。非表示のスコアも低いです。次の操作を見てみましょう

mounted() {
    // 登录判断，项目成功运行后启动
    isLogin()
      ? console.log("isLogin")
      : (console.log("Need to login"),
        this.$message.error('未登录'),
        this.$router.push("/login")
      );
  },

ここで注意してください。ログイン状態判定のトリガーの位置に注意する必要がありますが、通常は mounted で、つまり初期化ページが完了した後のフック内でログイン状態を判定する場合が一般的です。ページ上の情報を取得するためのリクエスト関数。

なお、ここでの書き方は関数トリガーを判定するための ?: ですが、通常は if を使う人が多いかもしれません。ここでのプロンプト コンポーネントは要素であるため、独自のコンポーネント ライブラリのプロンプトに従ってさまざまな変更を加えることができます。

setToken

getToken はカプセル化されているため、便宜上 setToken を再度カプセル化する必要があります

export function setToken(token) {
  return localStorage.setItem("token", token);
}

(学習ビデオ共有: webfrontendtutorial)

以上がVuexを使わずにログイン状態判定をカプセル化する方法についてお話しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。