全局导航守卫

TIP

全局导航守卫有三种：

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

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

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

全局导航守卫和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,
  }
}

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

全局导航守卫 #

全局导航守卫