vue router 4 源码篇：导航守卫该如何设计（一）

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

// ...

return {
  // ...
  beforeEach: beforeGuards.add,
  beforeResolve: beforeResolveGuards.add,
  afterEach: afterGuards.add,
}

/**
 * Create a list of callbacks that can be reset. Used to create before and after navigation guards list
 */
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,
  }
}

router.beforeEach((to, from) => {
  console.log('注册自己回调逻辑')
})

runGuardQueue(guards)
  .then(() => {
    // check global guards beforeEach
    guards = []
    for (const guard of beforeGuards.list()) {
      guards.push(guardToPromiseFn(guard, to, from))
    }
    guards.push(canceledNavigationCheck)

    return runGuardQueue(guards)
  })

// keep a reference to the enterCallbackArray to prevent pushing callbacks if a new navigation took place
const enterCallbackArray =
  record &&
  // name is defined if record is because of the function overload
  (record.enterCallbacks[name!] = record.enterCallbacks[name!] || [])

const next: NavigationGuardNext = (
  valid?: boolean | RouteLocationRaw | NavigationGuardNextCallback | Error
) => {
  // 参数为false时，抛出异常拦截路由跳转
  if (valid === false) {
    reject(
      createRouterError<NavigationFailure>(
        ErrorTypes.NAVIGATION_ABORTED,
        {
          from,
          to,
        }
      )
    )
  } else if (valid instanceof Error) {
    // 参数为Error时，抛出异常拦截路由跳转
    reject(valid)
  } else if (isRouteLocation(valid)) {
    // 参数为路由路径时会进行重定向，此时要抛出异常并拦截
    reject(
      createRouterError<NavigationRedirectError>(
        ErrorTypes.NAVIGATION_GUARD_REDIRECT,
        {
          from: to,
          to: valid,
        }
      )
    )
  } else {
    // 如果参数为回调函数，会将这个函数添加到record.enterCallbacks[name]中，等待导航确认后再执行
    if (
      enterCallbackArray &&
      // since enterCallbackArray is truthy, both record and name also are
      record!.enterCallbacks[name!] === enterCallbackArray &&
      typeof valid === 'function'
    ) {
      enterCallbackArray.push(valid)
    }
    resolve()
  }
}

// wrapping with Promise.resolve allows it to work with both async and sync guards

// 将当前组件绑定到导航守卫上，返回给guardReturn变量
const guardReturn = guard.call(
  record && record.instances[name!],
  to,
  from,
  __DEV__ ? canOnlyBeCalledOnce(next, to, from) : next
)
// 组装包含当前组件的守卫到Promise.resolve中去
let guardCall = Promise.resolve(guardReturn)

// ①当传进来的导航守卫参数少于3个时（即没有使用next参数），直接使用上面声明好的next方法来承载回调，并把guardReturn作为参数传进next中
if (guard.length < 3) guardCall = guardCall.then(next)

// 如果使用到next参数时
if (__DEV__ && guard.length > 2) {
  const message = `The "next" callback was never called inside of ${
    guard.name ? '"' + guard.name + '"' : ''
  }:\n${guard.toString()}\n. If you are returning a value instead of calling "next", make sure to remove the "next" parameter from your function.`
  if (typeof guardReturn === 'object' && 'then' in guardReturn) {
    guardCall = guardCall.then(resolvedValue => {
      // ②如果守卫逻辑中返回Promise且未调用next()方法时，抛出异常
      // @ts-expect-error: _called is added at canOnlyBeCalledOnce
      if (!next._called) {
        warn(message)
        return Promise.reject(new Error('Invalid navigation guard'))
      }
      // ③合法守卫
      return resolvedValue
    })
  } else if (guardReturn !== undefined) {
    // @ts-expect-error: _called is added at canOnlyBeCalledOnce
    if (!next._called) {
      // ④当有返回值，并且未调用next()也会抛出异常
      warn(message)
      reject(new Error('Invalid navigation guard'))
      return
    }
  }
}
guardCall.catch(err => reject(err))

// 命中①，good
router.beforeEach((to, form) => {
  return Promise.resolve(() => {
    console.log(1)
  })
  // or
  // return 1
})

// 命中②，bad
router.beforeEach((to, form, next) => {
  return Promise.resolve(() => {
    console.log(1)
  })
})

// 命中③，good
router.beforeEach((to, form, next) => {
  return next(() =>
    Promise.resolve(() => {
      console.log(1)
    })
  )
})

// 命中④，bad
router.beforeEach((to, form, next) => {
  return 1
})

function runGuardQueue(guards: Lazy<any>[]): Promise<void> {
  return guards.reduce(
    (promise, guard) => promise.then(() => guard()),
    Promise.resolve()
  )
}

.then(() => {
  // check global guards beforeEach
  guards = []
  for (const guard of beforeGuards.list()) {
    guards.push(guardToPromiseFn(guard, to, from))
  }
  guards.push(canceledNavigationCheck)

  return runGuardQueue(guards)
})

.then(() => {
  // check global guards beforeResolve
  guards = []
  for (const guard of beforeResolveGuards.list()) {
    guards.push(guardToPromiseFn(guard, to, from))
  }
  guards.push(canceledNavigationCheck)

  return runGuardQueue(guards)
})

function triggerAfterEach(
  to: RouteLocationNormalizedLoaded,
  from: RouteLocationNormalizedLoaded,
  failure?: NavigationFailure | void
): void {
  // navigation is confirmed, call afterGuards
  // TODO: wrap with error handlers
  for (const guard of afterGuards.list()) guard(to, from, failure)
}

.then(() => {
  // check the route beforeEnter
  guards = []
  for (const record of to.matched) {
    // do not trigger beforeEnter on reused views
    if (record.beforeEnter && !from.matched.includes(record)) {
      if (isArray(record.beforeEnter)) {
        for (const beforeEnter of record.beforeEnter)
          guards.push(guardToPromiseFn(beforeEnter, to, from))
      } else {
        guards.push(guardToPromiseFn(record.beforeEnter, to, from))
      }
    }
  }
  guards.push(canceledNavigationCheck)

  // run the queue of per route beforeEnter guards
  return runGuardQueue(guards)
})