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

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

每次發(fā)生路由的導(dǎo)航跳轉(zhuǎn)時(shí)，都會(huì)觸發(fā)全局前置守衛(wèi)。因此，在全局前置守衛(wèi)中，程序員可以對(duì)每個(gè)路由進(jìn)行訪問權(quán)限的控制。

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

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

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

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

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

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

當(dāng)前用戶擁有后臺(tái)主頁的訪問權(quán)限，直接放行：next()。

當(dāng)前用戶沒有后臺(tái)主頁的訪問權(quán)限，強(qiáng)制其跳轉(zhuǎn)到登錄頁面：next('/login')。

當(dāng)前用戶沒有后臺(tái)主頁的訪問權(quán)限，不允許跳轉(zhuǎn)到后臺(tái)主頁：next(false)。

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