全局导航守卫

2023年05月02日

柏拉文

越努力，越幸运

一、全局前置守卫

---

router.beforeEach 注册一个全局前置守卫

语法

const router = createRouter({ ... })

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

• to: 即将要进入的目标 用一种标准化的方式

• from: 当前导航正要离开的路由 用一种标准化的方式

• next: 在之前的 Vue Router 版本中，也是可以使用 第三个参数 next 的。这是一个常见的错误来源，可以通过 RFC 来消除错误。然而，它仍然是被支持的，这意味着你可以向任何导航守卫传递第三个参数。在这种情况下，确保 next 在任何给定的导航守卫中都被严格调用一次。

  • next(): 进行管道中的放行

  • next({ path: '/login' }): 当前的导航被中断，然后进行一个新的导航

  • next({...to}): 中断当前导航并重新进入当前导航, 应用场景: 有一种情况需要请求获取权限列表，得到权限列表后需要重新进入该页面，否则获取权限后不重新进入该页面，会导致权限更新不及时、进而访问页面是发生空白的情况

返回值

可以返回的值如下:

• false: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from路由对应的地址。

• 路由地址: 通过一个路由地址跳转到一个不同的地址，就像你调用 router.push() 一样，你可以设置诸如 replace: true 或 name: 'home' 之类的配置。当前的导航被中断，然后进行一个新的导航，就和 from 一样。

应用场景

• 场景一、权限控制

  router.beforeEach(async(to, from, next) => {
      const { routerList } = store.getters
      const { path } = to
      if (!whiteList.includes(path)) {
          if (routerList && routerList.length) {
              const result = routerList.find(item => { return item.url === path })
              if (result) {
                  //必须有一个放行 next()
                  next()
              } else {
                  next({ path: '/landing' })
              }
          } else {
              //获取权限列表接口
              await store.dispatch('sidebar/set_menu')
              //获取完权限列表接口，重新进入该路由
              next({ ...to })
          }
      } else {
          next()
      }
  })

二、全局解析守卫

---

三、全局后置守卫

---