Vue中的導航守衛（路由守衛）

當做Vue-cli項目的時候感覺在路由跳轉前做一些驗證，比如登錄驗證，是網站中的普遍需求。
對此，vue-router 提供的 beforeEach可以方便地實現全局導航守衛（navigation-guards）。組件內部的導航守衛函數使用相同，只是函數名稱不同（beforeRouteEnter 、beforeRouteUpdate(2.2 新增) 、beforeRouteLeave）。

官方文檔地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

如何設置一個全局守衛

你可以使用 router.beforeEach 注冊一個全局前置守衛：就是在你router配置的下方注冊

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

當一個導航觸發時，全局前置守衛按照創建順序調用。守衛是異步解析執行，此時導航在所有守衛 resolve 完之前一直處於 等待中。

每個守衛方法接收三個參數：

• to: Route: 即將要進入的目標 路由對象

• from: Route: 當前導航正要離開的路由

• next: Function: 一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數。

  • next(): 進行管道中的下一個鈎子。如果全部鈎子執行完了，則導航的狀態就是 confirmed （確認的）。

  • next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應的地址。

  • next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。

  • next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調。

確保要調用 next 方法，否則鈎子就不會被 resolved。

一個簡單實用的小例子：

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-router路由元信息:

meta字段（元數據）

直接在路由配置的時候，給每個路由添加一個自定義的meta對象，在meta對象中可以設置一些狀態，來進行一些操作。用它來做登錄校驗再合適不過了

{
  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
    }
  ]
}

這里我們只需要判斷item下面的meta對象中的login_require是不是true，就可以做一些限制了

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

 

 

 

 

 

.