vue 路由守卫

vue-router 为我们提供了导航守卫的功能，可以通过跳转或取消的方式守卫导航

路由守卫是一种对于页面的鉴权操作，是页面的守门人，进入页面或离开页面时经常会使用到，比如如下场景：

• 未登录的用户，需要限制其无法进入未经授权的页面
• 管理员权限判断
• 浏览器类型或版本判断
• 一次性页面（用完即销毁，比如订单支付完成后此id对应的页面无法再进入，也无法通过路由直接访问）

路由守卫一共分为三种：

• 全局路由守卫

  • beforeEach —— 进入之前触发守卫
  • afterEach —— 进入之后触发守卫

• 组件内路由守卫

  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave

• 独享路由守卫

  • beforeEnter

执行顺序（生命周期）

1. 在进入页面时：

   1. beforeEach
   2. beforeRouteEnter
   3. beforeResolve
   4. afterEach
   5. 组件生命周期：beforeCreate、created、...

2. 离开页面

   1. 组件生命周期：beforeCreate、created、...、updated
   2. beforeRouteLeave
   3. beforeEach
   4. beforeResolve
   5. afterEach
   6. 组件生命周期（销毁）：beforeDestroy、destroyed

beforeResolve 会在组件被解析后触发（路由跳转前触发）

afterEach 在 beforeRouteEnter 之前，在 beforeEach 和 beforeResolve 之后触发

全局路由守卫

参数：

• to （要到哪里去，即跳转后的路由对象）
• from （从哪里来，即跳转前的路由对象）
• next （可选参数，回调函数）
  • next() 当全部执行完后，状态会变为 confirmed
  • next('/') 或是 next({ path: '/' })
  • next(error)
  • next(false)

如下是一段关于登录鉴权的守卫写法

router.beforeEach((to,from,next) =>{
    if (to.name !== '登录页面的name' && 未授权) 
        next({ name: 'Login' }) 
    else 
        next()
})

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

})

组件守卫

顾名思义，守卫范围为当前组件，操作方法与上述代码结构相同

独享守卫

独享守卫中，只有前置守卫（ beforeEnter ）没有后置，并且 beforeEnter 仅在进入组件时被调用，针对单个路由组件进行守卫

使用形式如下：