持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

路由导航守卫，简单来说，就是对用户要跳转的路由做一次检查，符合条件的放行，不符合条件的则强制用户跳转至登录页面。

前置导航守卫 router.beforeEach

三个参数：

1. to: 要去哪个页面

2. from: 从哪里来

3. next: 它是一个函数

const router = new VueRouter({ ... })
 
router.beforeEach((to, from, next) => {
  //  to:要去哪个页面
  //  from:从哪里来
  //  next:它是一个函数。
  //     如果直接放行 next()
  //     如果要跳到其它页 next(其它页)
})

示例代码：

router.beforeEach(async(to, from, next) => {
  NProgress.start() // 开启进度条
  const token = store.state.user.token
  const userId = store.state.user.userInfo.userId
  console.log(token, to.path, from.path)
  if (token) {
    if (to.path === '/login') { // 有 token还要去login
      next('/')
      NProgress.done() // 关闭进度条
    } else { // 有 token，去其他页面，放行
      if (!userId) {
        await store.dispatch('user/getUserInfo')
      }
      next()
    }
  } else {
    if (to.path === '/login') { // 没有token，去login，放行
      next()
    } else {
      next('/login') // 没有token，去其他页面
      NProgress.done()
    }
  }
})

实现步骤

• 前端在本地写好路由表，以及每个路由对应的角色，也就是哪些角色可以看到这个菜单 / 路由。

• 登录的时候，向后端请求得到登录用户的角色（管理者，普通用户）

• 利用路由守卫者(router.beforeEach)，根据取到的用户角色，跟本地的路由表进行对比，过滤出用户对应的路由，并利用路由进行菜单渲染

  1. 我们将储存在将storage中的token作为用户是否登录的标志，如果当前storage中有token，表明当前系统已被登录

  2. 将系统所有页面分为两类，需要登录才能查看的页面，不需要登录的login.vue, register.vue等

  3. 前端每次跳转路由时，做以下判断：

后置导航守卫 router.afterEach

不会接受 next 函数也不会改变导航本身，可以更新页面title，懒加载结束

router.afterEach((to, from) => {
  document.title = to.meta.title
})

路由独享守卫

指在单个路由配置的时候也可以设置的钩子函数，和beforeEach完全相同，如果两个都设置了，beforeEnter则在beforeEach之后紧随执行。在路由配置上直接定义beforeEnter守卫。

beforeEnter 守卫 只在进入路由时触发，不会在 params、query 或 hash 改变时触发。

const router = new VueRouter({
  routes: [
    {
      path: '/good',
      component: Good,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})