vue-route+beforeEach を使用してナビゲーション ガードを作成する

今回は、vue-route+beforeEach を使用してナビゲーションガードを作成する際の注意点を紹介します。以下は実際のケースです。

ルーティング ジャンプの前にログイン検証 (ログインしていない場合はログイン ページに移動する) などの検証を行うことは、Web サイトでは一般的な要件です。この点、vue-route が提供する beforeRouteUpdate はナビゲーション ガード (navigation-guards) を簡単に実装できます。

navigation-guards という名前は奇妙に聞こえますが、公式ドキュメントではこのように翻訳されているため、そう呼ぶことにします。

ドキュメントのアドレスを貼り付けます: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

まず、ドキュメント内の beforeRouteUpdate の使用法を抜粋してみましょう:

router.beforeEach を使用できます。グローバル フロント ガードを 1 つ登録するには:

const router = new VueRouter({ ... }) 
router.beforeEach((to, from, next) => { 
 // ... 
})

ナビゲーションがトリガーされると、グローバル フロント ガードが作成順に呼び出されます。ガードは非同期で解析および実行されます。現時点では、ナビゲーションはすべてのガードが解決されるまで待機します。

各ガードメソッドは 3 つのパラメータを受け取ります:

to: Route: 進入しようとしているターゲットルートオブジェクト

from: Route: 現在のナビゲーションが退出しようとしているルート

next: Function: このメソッドこのフックを解決しましょう。実行効果は、次のメソッドの呼び出しパラメータによって異なります。

next(): パイプラインの次のフックに進みます。すべてのフックが実行されると、ナビゲーションのステータスが確認されます。

next(false): 現在のナビゲーションを中断します。ブラウザの URL が変更されると (おそらくユーザーが手動で、またはブラウザの [戻る] ボタンによって)、URL アドレスは from ルートに対応するアドレスにリセットされます。

next('/') または next({ path: '/' }): 別のアドレスにジャンプします。現在のナビゲーションが中断され、新しいナビゲーションが開始されます。

next(error): (2.4.0+) next に渡されたパラメータが Error インスタンスの場合、ナビゲーションは終了し、エラーは router.onError() によって登録されたコールバックに渡されます。

必ず次のメソッドを呼び出してください。そうしないとフックが解決されません。

前のブログで、コースや注文を含むアカウント ページは、ジャンプする前にログインしているかどうかを判断する必要があります。ログインしている場合は、ログイン ページに移動してホームページにジャンプします。 :

const vueRouter = new Router({ 
  routes: [ 
    //...... 
    { 
     path: '/account', 
     name: 'account', 
     component: Account, 
     children: [ 
      {name: 'course', path: 'course', component: CourseList}, 
      {name: 'order', path: 'order', component: OrderList} 
     ] 
    } 
  ] 
}); 
vueRouter.beforeEach(function (to, from, next) { 
  const nextRoute = [ 'account', 'order', 'course']; 
  const auth = store.state.auth; 
  //跳转至上述3个页面 
  if (nextRoute.indexOf(to.name) >= 0) { 
    //未登录 
    if (!store.state.auth.IsLogin) { 
      vueRouter.push({name: 'login'}) 
    } 
  } 
  //已登录的情况再去登录页，跳转至首页 
  if (to.name === 'login') { 
    if (auth.IsLogin) { 
      vueRouter.push({name: 'home'}); 
    } 
  } 
  next(); 
});

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS Cookie プラグインの操作方法

Node.js を使用してメールアクティベーションに登録する方法

以上がvue-route+beforeEach を使用してナビゲーション ガードを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。