beforeEach 配線ジャンプ検証機能を実装

今回は、beforeEach のルートジャンプ検証機能についてご紹介します。 beforeEach がルートジャンプ検証を実装するための 注意事項 とは何ですか?

ルーティング ジャンプの前にログイン検証 (ログインしていない場合はログイン ページに移動する) などの検証を行うことは、Web サイトでは一般的な要件です。この点、vue-route が提供する beforeRouteUpdate では

navigationguards (navigation-guards) を簡単に実装できます。

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

ドキュメントのアドレスを貼り付けます:

https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

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

router を使用できます.beforeEach グローバル フロント ガードを登録します:

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 サイトの他の関連記事に注目してください。

推奨読書:

axiosのデータ対話手順の詳細な説明

Angularコンポーネントのユースケースの詳細な説明

以上がbeforeEach 配線ジャンプ検証機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。