Vueのナビゲーションガード（ルーティングガード）

Vueの-cliのように、このようなログイン認証などのジャンプをルーティングする前に、いくつかの検証を行うことを感じプロジェクトは、ユニバーサル需要サイトです。
この点で、beforeEach VUE-ルータの提供を簡単にグローバルナビゲーションガード（ナビゲーション・ガード）を実装することができます。同じガードを使用してナビゲーション機能の内部構成要素が、異なる機能名（beforeRouteEnter、beforeRouteUpdate（2.2を添加）、beforeRouteLeave）。

公式文書住所：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

グローバルガードを設定する方法

ルータの設定の下で登録されている：あなたはrouter.beforeEachは、グローバルな事前ガードを登録し使用することができます

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

ナビゲーションがトリガされたときにグローバルフロントガードは、作成順に呼び出します。ナビゲーションは、ガード解決にすべて終了したまでGuardは、この時間を分析し、非同期で実行される待機。

それぞれの方法には、3つの警備員のパラメータを受け取ります。

to: Route：についての目標入力するルートオブジェクトを
from: Route：現在のナビゲーションルートを残すことを約ありました
next: Function：このメソッドを呼び出してください解決このフックを。結果の実装は依存next呼び出しパラメータ方法。
- next()：次のフックのパイプライン。すべてのフックがいずれかの終了した場合は、ナビゲーションの状態がされて確認（確認）。
- next(false)：現在のナビゲーション割り込み。ブラウザのURLは、（ユーザによって手動で、またはブラウザバックボタンであってもよい）変更された場合、URLアドレスにリセットされfromた経路に対応するアドレス。
- next('/')またはnext({ path: '/' })：別のアドレスに移動します。現在のナビゲーションは、その後、新しいナビゲーションを中断しています。あなたにすることができnext、オブジェクトの任意の位置を通過し、そのように設定することができreplace: true、name: 'home'オプションのいずれかで使用するためのような支柱またはオプション。router-linktorouter.push
- next(error)：受信した場合（2.4.0+）nextパラメータがあるError場合、ナビゲーションが終了すると、エラーがに渡されるrouter.onError()登録済みのコールバック。

呼び出していることを確認してくださいnext方法を、それ以外の場合はフックが解決されません。

シンプルで実用的な小さな例：

const router = new VueRouter({ ... }) //这是路由配置，我就不多说了 const whiteList = ['/error', '/register/regindex', '/register/userauthent', '/register/submit'] // 路由白名单 vueRouter.beforeEach(function(to,from,next){ console.log("进入守卫"); if (userInfo.user_id>0){ console.log("登录成功"); next(); //记得当所有程序执行完毕后要进行next()，不然是无法继续进行的; }else{ console.log("登录失败"); getUserInfo.then(res => { if(res){ if (res.user_id){ if (res.status == 4) { //账号冻结 next({ path: '/error', replace: true, query: { noGoBack: true } }) } if (res.status == 3) { //认证审核中 next({ path: '/register/submit', replace: true, query: { noGoBack: true } }) } if (res.status != 1 && res.status != 3) { if (!res.mobile ) { next({ path: '/register/regindex', replace: true, query: { noGoBack: true }}) } else { //绑定完手机号了 next({ path: '/register/userauthent', replace: true, query: { noGoBack: true } }) } } next(); //记得当所有程序执行完毕后要进行next()，不然是无法继续进行的; }else{ if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入 next(); //记得当所有程序执行完毕后要进行next()，不然是无法继续进行的; }else{ next({ path: '/register/regindex', replace: true, query: { noGoBack: true }}) } } }else{ } } }).catch(()=>{ //跳转失败页面 next({ path: '/error', replace: true, query: { noGoBack: true }}) }) } }); export default router

ヒント：いくつかの場所は、裁判官へのメソッドおよびデータの転送に関与vuexが、実施例は、単にあなたの参照のためのアイデアを提供するために、表示しているための理由ではありません。

最後に、誰もがあまりにも多くのホワイトリスト以上のプロジェクトは、私たちが必要な場合は、ホワイトリストにVUE-ルータの経路メタ情報を交換していること言いました：

メタフィールド（メタデータ）

コンフィギュレーション、各カスタムオブジェクトのメタに直接追加のルーティングをルーティングする場合、メタオブジェクトには、何かをする、状態の一部に設けてもよいです。非常に適切なログオンチェックのためにそれを使用します

{
  path: '/actile',
  name: 'Actile',
  component: Actile,
  meta: {
    login_require: false
  },
},
{
  path: '/goodslist',
  name: 'goodslist',
  component: Goodslist,
  meta: {
    login_require: true
  },
  children:[
    {
      path: 'online',
      component: GoodslistOnline
    }
  ]
}

ここでは、唯一、次の項目のメタオブジェクトlogin_requireを決定する必要が事実ではない、あなたはいくつかの制限を行うことができます

router.beforeEach((to, from, next) => { if (to.matched.some(function (item) { return item.meta.login_require })) { next('/login') } else next() })

。