VUE学习12—路由守卫

路由守卫就是在跳转URL时进行验证。例如访问订单列表时,用户需要先登陆才🉑️。VUE中有全局路由守卫和局部路由守卫。

全局路由守卫

  1. 全局路由守卫:在router/index.js中编写。
  2. 用法:router.beforeEach(to, from, next)。其中to表示待访问的路径(路由对象),from表示正要离开的路径(源自哪个路由对象),next表示下一步跳转到哪里。
  3. next有四种参数用法。可以直接接路径或路由对象(例如next(‘/login’));可以接false来中断导航(next(false);可以接error中断导航并进入router.onError()方法;也可以不加参数,直接next(),进入pipe中下一个方法。
// user登陆 全局验证
const globalAuth = {
  isLogin () {
    return false
  }
}

// 一、新建路由对象
const router = new VueRouter({
  // mode: 'history',
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

// 二、配置全局路由守卫
/**
 * @param {to} 将要去的路由
 * @param {from} 出发的路由
 * @param {next} 执行下一步
 */
router.beforeEach((to, from, next) => {
  // 当前往orderList,判断用户登陆情况
  if (to.path === '/orderList') {
    // 如果用户已登陆,继续
    if (globalAuth.isLogin()) {
      next()
    } else { // 如果用户未登录,跳转登陆
      next('/login')
    }
  } else { // 当不是前往orderList时,无需理会,继续
    next()
  }
})

⚠️注意,全局路由守卫除了有beforeEach()外,还有afterEach()方法。它没有next 函数也不会改变导航本身。

router.afterEach((to, from) => {
  // ...
})

局部路由守卫

局部路由守卫也叫组件内的守卫,顾名思义是在views或component文件夹中的逻辑或视图组件vue文件中编写,也可以在router/index.js中单独针对一个path编写。

局部守卫有三个方法。⚠️注意,是RouteEnter(),不是RouterEnter()

  1. beforeRouteEnter()。最好不要用于monted()生命周期中。可以获取data()方法中的数据。
  2. beforeRouteUpdate()。组件复用但路径改变时使用。常用于动态路由
  3. beforeRouteLeave()。导航离开时使用。通常用来防止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

完整的导航解析流程(来自vuejs官网)

  1. 导航被触发。
  2. 在失活的组件里调用离开守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。