ログインインターセプションを実装するためのVueルーティング

1. 概要

プロジェクト開発では、ルートが切り替わったりページが更新されたりするたびに、ユーザーがログインしているかどうかを判断する必要があります。フロントエンドでこの判断を行うこともできますし、バックエンドでもこの判断を行います。フロントエンドでもこの判断を行うのが最適です。

vue-router は、ルートが変更される前と後にトリガーされるグローバル プレナビゲーション フック beforeEach とグローバル ポストナビゲーション フック afterEach というナビゲーション フックを提供します。そのため、beforeEachナビゲーションフックでユーザーがログインしているかどうかを判断する必要があります。

ナビゲーション フックには 3 つのパラメーターがあります。

1. to: 入力するターゲットルーティングオブジェクト。

2. from: 現在のナビゲーションがこれから出発するルート オブジェクト。

3. next: このメソッドを呼び出した後にのみ、次のフック関数 (afterEach) に入ることができます。

next()//to が指すルートに直接移動します
next(false) //現在のルートを中断する
next('route') // 指定されたルートにジャンプ
next('error') //エラールートへジャンプ

2. ログインインターセプションを実装するためのルーティングナビゲーションガード

ここでは、空の vue プロジェクトを使用してデモンストレーションを行います。主に、ホームページとログインの 2 つのページがあります。

ホームページにアクセスするときはログインする必要があります。ログインしないと、ログイン ページにリダイレクトされます。

空のvueプロジェクトを作成し、src\componentsにLogin.vueを作成します。

<テンプレート>
 <div>これはログインページです</div>
</テンプレート>

<スクリプト>
 エクスポートデフォルト{
  名前: 「ログイン」
 }
</スクリプト>

<スタイルスコープ>

</スタイル>

src\router\index.js を変更する

'vue' から Vue をインポートします
'vue-router' から Router をインポートします。
'@/components/HelloWorld' から HelloWorld をインポートします。
'@/components/Login' からログインをインポートします。


Vue.use(ルーター)

const router = 新しいルーター({
 mode: 'history', // URL 内の # を削除します
 ルート: [
 {
  パス: '/login',
  名前: 'ログイン',
  メタ: {
  タイトル: 「ログイン」
  requiresAuth: false, // false はログインが不要であることを意味します},
  コンポーネント: ログイン
 },
 {
  パス： '/'、
  名前: 'HelloWorld',
  メタ: {
  タイトル: 'ホームページ'、
  requiresAuth: true, // true はログインが必要であることを意味します},
  コンポーネント: HelloWorld
 },

 ]
})

// ルーティングインターセプション、ログインが必要かどうかを判断 router.beforeEach((to, from, next) => {
 if (to.meta.title) {
 //タイトルがあるかどうかを判断します document.title = to.meta.title;
 }
 // console.log("タイトル",document.タイトル)
 // 現在のルートナビゲーションにログインが必要かどうかを判断するには、requiresAuth を使用します。if (to.matched.some(record => record.meta.requiresAuth)) {
 トークン = localStorage.getItem('トークン')
 // console.log("トークン",トークン)
 // ログインアクセスが必要な場合は、ユーザーがログインしているかどうかを確認します if (!token) {
  次（{
  パス: '/login',
  クエリ: { リダイレクト: to.fullPath }
  })
 } それ以外 {
  次（）
 }
 } それ以外 {
 next() // 必ず next() を呼び出してください
 }
})

デフォルトルーターをエクスポートします。

例:

各ルートごとにメタが追加されます。 requiresAuth フィールドは、ログインが必要かどうかを示すために使用されます。

router.beforeEach ではトークンのチェックが行われます。空の場合はログインページに移動します。

ホームページにアクセス

http://localhost:8080

ジャンプします

http://localhost:8080/login?redirect=%2F

効果は以下のとおりです。

F12を開いてコンソールに入り、トークンを手動で書き込みます

localStorage.setItem('トークン', '12345678910')

効果は以下のとおりです。

ホームページに再度アクセスすると、通常通りアクセスできるようになります。

アプリケーションを開き、ローカルストレージの値を削除し、右クリックしてクリアをクリックします。

ページを更新すると、ログイン ページにリダイレクトされます。

どうですか、簡単じゃないですか？

以上が、vue ルーティングでログインインターセプションを実装する方法の詳細です。vue ログインインターセプションの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。