VueRouter笔记 - 路由守卫

路由守卫

目录

• 路由守卫
  • 1. 路由守卫简介
  • 2. 全局前置守卫
  • 3. 全局后置路由守卫
  • 4. 独享路由守卫
  • 5. 组件内路由守卫

1. 路由守卫简介

• 路由守卫主要用来通过跳转或取消的方式守卫路由。常用于用户权限管理，可以阻止权限不足的用户进入某些页面
• 完整的导航解析流程
  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在路由配置里调用 beforeEnter。
  5. 解析异步路由组件。
  6. 在被激活的组件里调用 beforeRouteEnter。
  7. 导航被确认。
  8. 调用全局的 afterEach 钩子。
  9. 触发 DOM 更新。
  10. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

2. 全局前置守卫

• 可以使用 router.beforeEach 注册一个全局前置守卫。全局前置路由守卫会在初始化的时候被调用，在每次路由切换之前被调用

  const router = new VueRouter({ ... })
  
  router.beforeEach((to, from, next) => {
    if(to.name === 'news' || to.name === 'message'){
        if(localStorage.getItem('school') === 'daiojd'){
            next()
        }else{
            alert('学校名不对，无权查看')
        }
    }else{
        next()
    }
  })
  

• 守卫方法接受三个参数：

  • to: Route: 即将要进入的路由对象目标
  • from: Route: 当前导航正要离开的路由
  • next: Function:
    • next(): 进行管道中的下一个钩子，一般跳转到to指向的路径
    • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
    • next({ path: '/' }): 跳转到一个不同的地址，该对象同样允许设置诸如 replace: true、name: 'home' 之类的选项。当前的导航被中断，然后进行一个新的导航。

3. 全局后置路由守卫

• 可以在路由配置上直接定义 beforeEnter 守卫。全局后置路由守卫会在初始化的时候被调用，在每次路由切换之后被调用

• 全局后置路由守卫使用的场合不多，一般用于页面跳转后更改页标签title

  router.afterEach((to, from) => {
    document.title = to.meta.title || '管理系统'
  })
  

4. 独享路由守卫

• 可以在路由配置上直接定义 beforeEnter 守卫。独享路由守卫仅仅对指定的那个路由生效

  //独享路由守卫直接写在需要使用的那个路由中
  const router = new VueRouter({
    routes: [
      {
        path: '/foo',
        component: Foo,
        beforeEnter: (to, from, next) => {
          // ...
        }
      }
    ]
  })
  

5. 组件内路由守卫

• 可以在路由组件内直接定义以下路由导航守卫：

  • beforeRouteEnter：通过路由规则，进入该组件时被调用，不能使用组件实例this，因为此时组件实例还没被创建
  • beforeRouteLeave：通过路由规则，离开该组件时被调用，可以使用组件this。通常用来禁止用户在还未保存修改前突然离开
  • 只有通过路由规则进入/离开组件才会触发该守卫，如果是类似<About/>这样直接在html中调用并渲染，是不会触发组件内路由守卫的

  const Foo = {
    template: `...`,
    beforeRouteEnter(to, from, next) {...},
    beforeRouteLeave(to, from, next) {...}
  }