vue-route の beforeEach を使用して、ナビゲーション ガード (ルーティング ジャンプの前にログインを確認する) 機能を実装します。

このような要件は、Web サイトでよく発生します。ログイン検証 (ログインしていない場合はログイン ページに移動します) など、ルーティング ジャンプの前にいくつかの検証を実行する必要があります。以下に、vue-route の beforeEach を使用してナビゲーション ガード (ルート ジャンプ前にログインを検証する) 機能を実装する方法を紹介します。興味のある友人は一緒に見てください。ログイン検証 (ではありません) など、ルート ジャンプの前にいくつかの検証を行ってください。ログイン済み) ログイン ページに移動します) は、Web サイトでの一般的な要件です。この点、vue-route が提供する beforeRouteUpdate はナビゲーション ガード (navigation-guards) を簡単に実装できます。

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

まず、文書内の 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(); 
});

以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

AjaxのreadyStateとステータスに関連する問題について議論する

$.Ajax()メソッドパラメータの包括的な分析(グラフィックチュートリアル)

Ajaxに基づくプログレスバーを使用したファイルアップロードの実装テクノロジー

以上がvue-route の beforeEach を使用して、ナビゲーション ガード (ルーティング ジャンプの前にログインを確認する) 機能を実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。