【vue-router源码】九、全局导航守卫的实现

【vue-rouer源码】系列文章

1. 【vue-router源码】一、router.install解析
2. 【vue-router源码】二、createWebHistory、createWebHashHistory、createMemoryHistory源码解析
3. 【vue-router源码】三、理解Vue-router中的Matcher
4. 【vue-router源码】四、createRouter源码解析
5. 【vue-router源码】五、router.addRoute、router.removeRoute、router.hasRoute、router.getRoutes源码分析
6. 【vue-router源码】六、router.resolve源码解析
7. 【vue-router源码】七、router.push、router.replace源码解析
8. 【vue-router源码】八、router.go、router.back、router.forward源码解析
9. 【vue-router源码】九、全局导航守卫的实现
10. 【vue-router源码】十、isReady源码解析
11. 【vue-router源码】十一、onBeforeRouteLeave、onBeforeRouteUpdate源码分析
12. 【vue-router源码】十二、useRoute、useRouter、useLink源码分析
13. 【vue-router源码】十三、RouterLink源码分析
14. 【vue-router源码】十四、RouterView源码分析

---

---

前言

【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。该系列文章源码参考vue-router v4.0.15。
源码地址：https://github.com/vuejs/router
阅读该文章的前提是你最好了解vue-router的基本使用，如果你没有使用过的话，可通过vue-router官网学习下。

该篇文章将分析全局导航守卫的实现。

使用

全局导航守卫有三种：

• beforeEach：在任何导航之前执行。返回一个删除已注册导航守卫的函数。
• beforeResolve：在导航解析之前执行。返回一个删除已注册导航守卫的函数。
• afterEach：在任何导航之后执行。返回一个删除已注册导航守卫的函数。

const router = createRouter({ // ... })

router.beforeEach = function() { // ... }
router.beforeResolve = function() { // ... }
router.afterEach = function() { // ... }

全局导航守卫实现

全局导航守卫和onError的实现都是通过维护一个数组进行实现。在vue-router中通过一个useCallbacks的函数可以创建一个可以重置的列表，全局钩子及onError就是通过useCallbacks实现。

const beforeGuards = useCallbacks<NavigationGuardWithThis<undefined>>()
const beforeResolveGuards = useCallbacks<NavigationGuardWithThis<undefined>>()
const afterGuards = useCallbacks<NavigationHookAfter>()
let errorHandlers = useCallbacks<_ErrorHandler>()

const router = {
  // ...
  beforeEach: beforeGuards.add,
  beforeResolve: beforeResolveGuards.add,
  afterEach: afterGuards.add,
  onError: errorHandlers.add,
  // ...
}

useCallbacks:

export function useCallbacks<T>() {
  let handlers: T[] = []

  function add(handler: T): () => void {
    handlers.push(handler)
    return () => {
      const i = handlers.indexOf(handler)
      if (i > -1) handlers.splice(i, 1)
    }
  }

  function reset() {
    handlers = []
  }

  return {
    add,
    list: () => handlers,
    reset,
  }
}

useCallbacks返回一个对象，该对象有三个属性。其中list是内部维护的列表；add是一个添加handler的函数，它返回一个删除对应handler的函数；reset是个重置列表的函数。

关于全局导航守卫的执行时机可参考：router.push