关于前端:vuerouter源码九全局导航守卫的实现

前言

【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