ナビゲーションルートVUEガード - グローバルフロントガード

まず、使用

全局前置守卫用于在路由配置生效之前进行一些动作，可以使用 router.beforeEach 注册一个全局前置守卫：

CONSTルータ= 新しいVueRouter（{...}）

router.beforeEach（（、隣から） => {
   // ... 
}）

パラメータ：

To：ルート：ターゲット・ルーティングオブジェクトに入ろうとし
From：ルート：現在のルートナビゲーションが出ようとしました
次：機能：このフックを解決するために、このメソッドを呼び出してください。結果の実装は、次のメソッド呼び出しのパラメータに依存しています。

　　　　（1）次の（）：次のフックパイプライン。すべてのフックのいずれかの完成は、ナビゲーションの状態が確認された場合（認めました）。

　　　　（2）（偽）次：現在のナビゲーションを中断。ブラウザのURLは、（ユーザによって手動で、またはバックブラウザボタンであってもよい）変更された場合、それはルートに対応するアドレスからURLアドレスにリセットされます。

　　　　（3）次の（ '/'）または次（{パス： '/'}）：別のアドレスへのジャンプ。現在のナビゲーションは、その後、新しいナビゲーションを中断しています。あなたは、任意の位置に次のオブジェクトに渡し、交換することを可能にするような提供することができます：真、名前：オプション「ホーム」などまたはオプションでrouter.pushルータリンクを支えるために使用されるいずれかを。

注意：を呼び出すようにしてください next 方法を、それ以外の場合はフックが解決されません。

第二に、例

その後、あなたはフロントガードはこの作品を実施し使用することができ、高度なトークンを取得する際にログインし、ログインページに戻りますする必要がない場合は他のページには、多くの場合、トークンがあるかどうかを判断する必要がある場合、ログインページに入ることに加えて、存在する場合、アクセスすることができます。

index.jsルータのルーティングファイルフォルダ内：

// ルートナビゲーションガード
router.beforeEach（（次に、から）、へ => {
   // 構成をルーティング行く
  // 現在のルーティング設定から
  // など、経路の構成は力で継続するように、呼び出してください次にあなたは）（そのまま次のログインを、または次の（）に存在する場合、トークンが存在するかどうかを判断するために行く場合は

  IF（「/ログイン」を=== to.path）を返す次の（）; // 戻り値を使用し、必要が他の書き込みをしないように

  // 裁判官をトークン他のページがある 
  のconstは= localStorage.getItemトークン（ 'トークン' ）; 

  // 存在が戻って続けるが、
  IF（トークン）を返す次の（）; 


  // この$のrouter.push（{名： 'ログイン'}）。 ＃これがない、あなたが使用することはできません 
  Message.warning（「ログインしていないが、ログインしてください！」）
  router.push（{ 
    名：「ログイン」
  }）


}）。

これは、各コンポーネントbeforecreate方法は、このような家庭用部品のように、各部品の使用を必要とする場合には、冗長性を避けるため、決定したトークンをURLに対応する各コンポーネントの必要性を排除します。

    // ルートナビゲーション書き込みせずにこの方法ガード
    beforeCreate（）{ 
      constのトークン = localStorage.getItem（ 'トークン' ）;
       IF（！トークン）{
         この $のrouter.push（{名： 'ログイン' }）
      } 
    }、

参考：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5 ％AE％88％E5％以下の8D ％AB

ナビゲーションルートVUEガード - グローバルフロントガード

おすすめ