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()
    }
})