Vue Router 路由守卫

文章出自：https://juejin.cn/post/7106128370832064543

作者：五条代码

一、全局前置守卫—— router.beforeEach

const router = createRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
  // 返回 false 以取消导航
  return false
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。

包含三个参数：

to(必填)：即将要进入的目标————通俗来说就是去哪儿
form(必填)：当前导航正要离开的路由————通俗来说就是来自哪
next(可选)：钩子函数，里面定义参数，确认下一步路由要做什么 next(‘/’)或者 next({ path: ‘/’ }): 跳转到一个不同的地址。

一般应用在用户未能验证身份时重定向到 /login ：

router.beforeEach((to, from, next) => { 
   if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) 
   else next() 
})

二、全局解析守卫————router.beforeResolve

这和 router.beforeEach 类似，因为它在每次导航时都会触发，但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。这里有一个例子，确保用户可以访问自定义 meta（https://router.vuejs.org/zh/guide/advanced/meta.html）属性 requiresCamera 的路由：

router.beforeResolve(async to => {
  if (to.meta.requiresCamera) {
    try {
      await askForCameraPermission()
    } catch (error) {
      if (error instanceof NotAllowedError) {
        // ... 处理错误，然后取消导航
        return false
      } else {
        // 意料之外的错误，取消导航并把错误传给全局处理器
        throw error
      }
    }
  }
})

注意：router.beforeResolve 是获取数据或执行任何其他操作的理想位置

三、全局后置钩子————router.afterEach

和守卫不同的是，后置钩子不会接受 next 函数也不会改变导航本身：

router.afterEach((to, from) => {
// 在全局内置守卫中使用功能包(特效)，可在后置钩子中进行终止
})

四、路由独享的守卫————beforeEnter

你可以直接在路由配置上定义，但是它只在进入路由时触发，不会在 params、query 或 hash 改变时触发。

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
      // reject the navigation
      return false
    },
  },
]

五、组件内的守卫

beforeRouteEnter —进入前
beforeRouteUpdate — 路由变化时
beforeRouteLeave — 离开后

const UserDetails = {
  template: `...`,
  beforeRouteEnter(to, from) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
  },
  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  },
}