vue-router 中如何保护路由？

Question

Vue Router 提供路由守卫的功能，可以在路由守卫里做判断逻辑，校验用户的权限，实现路由访问的控制

路由的模式

1. hash 模式
   利用 location.hash 作为路径，监听 hashChange 事件
2. history 模式
   利用 history.pushState api实现， 监听 popState 事件
3. abstract 模式
   提供给SSR使用，v4 叫做 memory mode

路由守卫有 3 种：

1. 全局路由守卫
2. 路由独享守卫
3. 组件内守卫

组件路由守卫中获取实例

beforeRouteEnter(to, from, next) {
    next(vm => {

    })
}

路由守卫执行的顺序

1. 在失活组件里调用 beforeRouteLeave
2. 全局的 beforeEach
3. 重用的组件调用 beforeRouteUpdate
4. 调用路由的 beforeEnter
5. 处理异步加载逻辑
6. 激活组件 beforeRouteEnter
7. 全局 beforeResolve
8. DOM更新
9. 全局 afterEnter

next 方法如何实现

vue router 中的路由守卫是存储在队列中的，路由更新时，会迭代这个队列，执行每一个hook, next 作为回调函数，如果有hook 的 next 重定向或者传入false 的化，本次导航都会终止。

try {
  hook(route, current, (to: any) => {
    if (to === false) {
      // next(false) -> abort navigation, ensure current URL
      this.ensureURL(true);
      abort(createNavigationAbortedError(current, route));
    } else if (isError(to)) {
      this.ensureURL(true);
      abort(to);
    } else if (
      typeof to === "string" ||
      (typeof to === "object" &&
        (typeof to.path === "string" || typeof to.name === "string"))
    ) {
      // next('/') or next({ path: '/' }) -> redirect
      abort(createNavigationRedirectedError(current, route));
      if (typeof to === "object" && to.replace) {
        this.replace(to);
      } else {
        this.push(to);
      }
    } else {
      // confirm transition and pass on the value
      next(to);
    }
  });
} catch (e) {
  abort(e);
}