Vue2.xは、ユーザーのログインと終了を実装するためにルーティングナビゲーションガードを設定します。

序文

ここに画像の説明を挿入

以前、Vue の研究では、ユーザーログインモジュールの機能は、ルーティングナビゲーションガード制御を通じて実現されていました。今、プロジェクトを再度行う場合、同じ機能を実現するために、ルーティングナビゲーションガードを Vue で構成する必要があります。ここでは、実装プロセスを記録し、まとめます (この記事は Vue2.x に基づいて実装されています)

ヒント：以下はこの記事の主な内容です。以下のケースを参考にしてください。

1. ルーティングナビゲーションガードを設定する

1. グローバルナビゲーションガード

プロジェクトにバックエンドしかない場合は、Vue でグローバルナビゲーションガードを設定できます。グローバルルーティングナビゲーションガードを設定すると、プロジェクトが開始されている限り、ユーザーはログインしていない場合はログインページにのみジャンプでき、他のインターフェイスにジャンプすることはできません。
vue-router依存関係をインストールするときに自動的に生成されるrouter -> index.jsフォルダに次のコードを追加します。

router.beforeEach((to, from, next) => {
  // ログインインターフェースへのアクセスの場合は直接許可します if (to.path === '/login') return next()
  //ユーザーページトークン情報を取得する let token = window.sessionStorage.getItem('token')
  //トークンデータがnullの場合は、指定されたパスにジャンプします。if (!token) return next("/login")
  次（）
})

ここに画像の説明を挿入

パラメータの説明:

to:どのインターフェースにジャンプするか
from:どのインターフェースからジャンプするか
next: next()関数を表し、解放するために使用される

2. ローカルナビゲーションガード

プロジェクト開発では、フロントエンドとバックエンドの両方を同時に開発する必要がある状況もあります。このとき、フロントエンドのインターフェースはユーザーに表示する必要があり、ユーザーはログインしていなくてもアクセスできるため、ルーティングナビゲーションガードをグローバルに設定することはできません。そのため、ルーティングナビゲーションガードはバックエンドのパスのみをインターセプトします。

ルートナビゲーションガードは引き続き index.js フォルダーで構成されますが、今回は単一のコンポーネントに対して構成されます。

たとえば、私のプロジェクトでは、Welcome コンポーネントはバックグラウンドコンポーネントです。このコンポーネントのルーティングナビゲーションガードを構成するには、まず、単一コンポーネントナビゲーションガードの構成で、 beforeEachのグローバル構成をbeforeEnterに置き換えます。

ここに画像の説明を挿入

作者は以前、ログインコンポーネントでルーティングナビゲーションガードを設定しましたが、機能しませんでした。今後このようなミスをしないように、ここに記録しておきます。コンポーネントに次のコードを追加するだけです。

// ルートナビゲーションガードを定義する beforeEnter(to, from, next) {
      //ユーザーページトークン情報を取得する let token = window.sessionStorage.getItem('token')
      //トークンデータがnullの場合は、指定されたパスにジャンプします。if (!token) return next("/login")
      次（）
    }

ローカルナビゲーションガードのパラメータは、グローバル構成のパラメータと一致しています。 beforeEach beforeEnterに置き換えることを除いて、残りは同じです。ここでは詳細には触れません。

2. ユーザーログイン

ここではフロントエンドコードのみを示します。バックエンドコードの書き方は人それぞれ異なるため、ここでは示しません。

1. axios の設定

プロジェクト内のコールバック地獄の問題を回避するために、ここでaxiosプラグインをインポートし、main.jsファイルで事前にaxiosを設定しました。

/* axios パッケージをインポート */
'axios' から axios をインポートします

/* axios のリクエストルートディレクトリを設定します*/
axios.defaults.baseURL = 'http://localhost:8089/'
/* vue オブジェクトにグローバル オブジェクトを追加し、$http オブジェクトを使用して Ajax リクエストを送信します */
Vue.prototype.$http = axios

グローバル構成は main.js ファイルで実行されるため、設定されたリクエストルートディレクトリを表す$httpコンポーネントに表示されます。ここではhttp://localhost:8089/です。

2. ユーザーログインコード

// ログインボタンがクリックされたら、バックグラウンドにデータを送信します login() {
  this.$refs.loginFormRef.validate(非同期有効 => {
    if(!valid) 戻り値
    const {data: result} = this.$http.post("/user/login",this.loginForm) を待機します。
    // 返されたパラメータのステータス コードが 200 でない場合は、ログインに失敗したことを意味します。if(result.status !== 200) return this.$message.error("User login failed")
    this.$message.success("ユーザーのログインに成功しました")
    //ログインが成功したら、トークン情報をセッションウィンドウに保存します。sessionStorage.setItem('token',result.data)
    //バックエンド管理システムのホームページにジャンプします this.$router.push("/welcome")
})

3. ユーザー終了

ユーザーがログアウトするときは、セッション内のトークンデータを削除して他のページにジャンプするだけで済みます。このとき、ルーティングナビゲーションガードが再び有効になるため、バックエンドに接続せずにフォアグラウンドで実装できます。

1. 実装コード

ログアウト() {
  //1. セッション内のデータを削除する window.sessionStorage.clear()
  //2. ユーザーがログインページにアクセスする this.$router.push('/login')
}

要約する

上記は、Vue でルーティングナビゲーションガードを設定した後、ユーザーのログインとログアウトを実現する機能です。実装には、プロジェクトにログインしないとインターフェースにアクセスできない状況と、ユーザーがログインしていなくてもフロントデスクを閲覧できる状況の 2 つがあります。最初のケースでは、グローバル構成のみを実行する必要があります。 2 番目のケースでは、ログイン後にジャンプするコンポーネントで単一コンポーネントルーティングナビゲーションを構成するだけで済みます。

これで、Vue2.x ルーティングナビゲーションガードを設定してユーザーのログインとログアウトを実装する方法についての説明は終わりです。Vue ルーティングガードのログインとログアウトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: