Vue Router全局前置守衛beforeEach

vue-router提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。

今天介紹一種導航守衛：全局前置守衛beforeEach

注冊方式：

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

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

參數：

• to : 即將要進入的目標 路由對象
• from: 當前導航正要離開的路由
• next: 方法，一定要調用該方法來 resolve 這個鈎子

next的執行效果依賴於next方法的調用參數

• next(): 進行管道中的下一個鈎子
• next(false): 中斷當前的導航
• next('/)或next({ path: '/' }): 跳轉到一個不同的地址, 當前的導航被中斷，然后進行一個新的導航

注意： 確保 next 函數在任何給定的導航守衛中都被嚴格調用一次。它可以出現多於一次，但是只能在所有的邏輯路徑都不重疊的情況下，否則鈎子永遠都不會被解析或報錯。

使用示例：

router.beforeEach((to, from, next) => {
    if (!storage.get(ACCESS_TOKEN)) {
        // 用戶未登陸，進入登陸頁面
        next({name: 'Login'})
    } else {
        next()
    }
})