Vue導航守衛(wèi)的全局導航守衛(wèi)

Vue中的導航守衛(wèi)主要用于控制路由的訪問權限，導航守衛(wèi)的工作示意圖如下：

每次發(fā)生路由的導航跳轉時，都會觸發(fā)全局前置守衛(wèi)。因此，在全局前置守衛(wèi)中，程序員可以對每個路由進行訪問權限的控制。

//創(chuàng)建路由實例對象
const router - new VueRouter({..… })

// 調用路由實例對象的 beforeEach方法，即可聲明“全局前置守衛(wèi)”
//每次發(fā)生路由導航跳轉的時候，都會自動般發(fā)fn這個“回調函數(shù)”
router.beforeEach(fn)

全局前置守衛(wèi)的回調函數(shù)中接收3個形參，格式為：

//創(chuàng)建路由實例對象
const router = new VueRouter({ .…. })

//全局前置守衛(wèi)
router.beforeEa:((to,from, next) => (
//to是將要訪問的路由的信息對象
//from是將要離開的路由的信息對象
// next是一個函數(shù)，調用 next（）表示放行，允許這次路由導航
}）

參考示意圖，分析 next 函數(shù)的 3 種調用方式最終導致的結果：

當前用戶擁有后臺主頁的訪問權限，直接放行：next()。

當前用戶沒有后臺主頁的訪問權限，強制其跳轉到登錄頁面：next('/login')。

當前用戶沒有后臺主頁的訪問權限，不允許跳轉到后臺主頁：next(false)。

router.beforeEach((to, from, next) ?> {
if (to.path === '/main'){
    const token ? localStorage.getItem('token')
    if (token)(
      next（）//訪問的是后臺主頁，且有 token 的值
      } else {
      next('/login')//訪問的是后臺主頁，但是沒有 token的值
      } 
  } else {
    next（）//訪問的不是后臺主頁，直接放行
  }
})