深入分析 Vue Router 源码中导航守卫 (Navigation Guards) 的执行流程，包括 `beforeEach`, `beforeResolve`, `afterEach` 的顺序和作用。

好嘞，各位听众，欢迎来到今天的“Vue Router 导航守卫探秘”讲座！我是今天的“导游”——你们的老朋友，一个致力于把复杂代码讲成段子的程序员。今天，咱们就来扒一扒 Vue Router 里的导航守卫，看看它们是怎么“各司其职”，保证我们的页面跳转既安全又顺畅的。

开场白：导航守卫是啥？为什么要搞这些玩意儿？

想象一下，你开着车（你的应用）在高速公路上（不同的路由之间）飞驰。如果没有交通规则和交警叔叔（导航守卫），那还不乱套了？导航守卫就像是这些规则和交警，负责在你进入、离开某个路由之前或之后，检查一下身份、确认一下安全，甚至还可以临时让你改道！

简单来说，导航守卫就是 Vue Router 提供的一系列钩子函数，允许你在路由发生变化时执行一些自定义逻辑。比如：

身份验证: 只有登录用户才能进入某些页面。
权限控制: 不同用户角色访问不同页面。
数据加载: 在进入页面前预先加载数据。
页面统计: 记录用户访问了哪些页面。
防止离开未保存的页面: 如果用户正在编辑内容，提示保存后再离开。

导航守卫的种类：三剑客登场

Vue Router 提供了三种全局导航守卫，它们就像三位好基友，各有各的职责，一起守护着你的路由：

beforeEach (全局前置守卫): “老大哥”的角色，每次路由跳转前都要经过它的“盘问”。它就像高速公路收费站，必须先交钱（执行完它的逻辑）才能通过。
beforeResolve (全局解析守卫): “二哥”的角色，在所有组件内守卫和异步路由组件被解析之后、导航被确认之前被调用。它就像安检，确保所有东西都准备好了，可以安全上路。
afterEach (全局后置钩子): “小弟”的角色，路由跳转完成后才执行。它就像路边的加油站，等你到达目的地后，给你加个油，做一些收尾工作。

源码剖析：导航守卫的执行流程（重点来了！）

现在，咱们深入源码，看看这三位“基友”是怎么协同工作的。为了更好地理解，我们先来看一段简化的 Vue Router 源码（别怕，我会尽量用人话解释）：

// 简化版的 Vue Router 源码 (仅用于演示)
class VueRouter {
  constructor(options) {
    this.routes = options.routes;
    this.beforeEachHooks = [];
    this.beforeResolveHooks = [];
    this.afterEachHooks = [];
    this.history = new History(options.mode, options.base); // 模拟 history 对象
  }

  beforeEach(fn) {
    this.beforeEachHooks.push(fn);
  }

  beforeResolve(fn) {
    this.beforeResolveHooks.push(fn);
  }

  afterEach(fn) {
    this.afterEachHooks.push(fn);
  }

  async push(to) {
    // 1. 执行 beforeEach 守卫
    for (const guard of this.beforeEachHooks) {
      const result = await guard(to, this.history.current, this.next);
      if (result === false) {
        // 如果返回 false，则中断导航
        return;
      } else if (typeof result === 'string' || typeof result === 'object') {
          // 如果返回一个路由地址，就重定向
          this.push(result);
          return;
      }
    }

    // 2. 解析异步路由组件和组件内的守卫 (这里省略，简化版)

    // 3. 执行 beforeResolve 守卫
    for (const guard of this.beforeResolveHooks) {
      const result = await guard(to, this.history.current, this.next);
        if (result === false) {
          return;
        } else if (typeof result === 'string' || typeof result === 'object') {
          this.push(result);
          return;
      }
    }

    // 4. 更新路由状态
    this.history.transitionTo(to);

    // 5. 执行 afterEach 钩子
    for (const hook of this.afterEachHooks) {
      hook(to, this.history.current);
    }
  }

  next() {
    //一个空函数，用于模拟next()
  }
}

class History {
    constructor(mode, base) {
        this.mode = mode;
        this.base = base;
        this.current = {
            path: '/',
            query: {},
            hash: ''
        }; // 模拟当前路由对象
    }
    transitionTo(to) {
        this.current = {
            path: to,
            query: {},
            hash: ''
        };
        console.log('Route changed to:', to);
    }
}

别被代码吓到，我来一句一句解释：

VueRouter 类: 这是 Vue Router 的核心类，负责管理路由和导航。
beforeEachHooks, beforeResolveHooks, afterEachHooks: 这三个数组分别存储了我们通过 router.beforeEach(), router.beforeResolve(), router.afterEach() 注册的守卫函数。
push(to) 方法: 这是路由跳转的核心方法。当调用 router.push('/some/path') 时，就会触发这个方法。
beforeEach 守卫执行: push 方法首先遍历 beforeEachHooks 数组，依次执行每个守卫函数。如果任何一个守卫返回 false，导航就会被中断。如果返回一个路由地址，就重定向到该地址。
beforeResolve 守卫执行: 在所有组件内守卫和异步路由组件被解析之后，push 方法会遍历 beforeResolveHooks 数组，执行每个守卫函数。同样，如果返回 false，导航也会被中断, 如果返回一个路由地址，就重定向到该地址。
更新路由状态: 如果没有被中断，push 方法会调用 history.transitionTo(to) 来更新路由状态。
afterEach 钩子执行: 最后，push 方法会遍历 afterEachHooks 数组，执行每个钩子函数。

代码示例：实战演练

光说不练假把式，咱们来写一段代码，看看这些守卫是怎么用的：

const router = new VueRouter({
  routes: [
    { path: '/', component: { template: '<div>Home</div>' } },
    { path: '/profile', component: { template: '<div>Profile</div>' }, meta: { requiresAuth: true } },
    { path: '/admin', component: { template: '<div>Admin</div>' }, meta: { requiresAdmin: true } }
  ]
});

router.beforeEach((to, from, next) => {
  console.log('beforeEach: 准备进入', to.path);
  if (to.meta.requiresAuth) {
    // 检查是否已登录
    const isLoggedIn = localStorage.getItem('isLoggedIn');
    if (!isLoggedIn) {
      console.log('beforeEach: 未登录，重定向到首页');
      next('/'); // 重定向到首页
    } else {
      console.log('beforeEach: 已登录，放行');
      next(); // 继续导航
    }
  } else if (to.meta.requiresAdmin) {
      //检查是否是管理员
      const isAdmin = localStorage.getItem('isAdmin');
      if (!isAdmin) {
        console.log('beforeEach: 不是管理员，重定向到首页');
        next('/'); // 重定向到首页
      } else {
        console.log('beforeEach: 是管理员，放行');
        next(); // 继续导航
      }
  }
  else {
    console.log('beforeEach: 无需验证，放行');
    next(); // 继续导航
  }
});

router.beforeResolve((to, from, next) => {
  console.log('beforeResolve: 确保所有组件都解析完毕');
  // 可以在这里做一些更细致的检查，比如数据预取
  next();
});

router.afterEach((to, from) => {
  console.log('afterEach: 已进入', to.path);
  // 可以在这里做一些页面统计、滚动条复位等操作
});

// 模拟登录状态
localStorage.setItem('isLoggedIn', 'true');
localStorage.setItem('isAdmin', 'true');

// 模拟路由跳转
router.push('/profile'); // 访问需要登录的页面
router.push('/admin'); // 访问需要管理员权限的页面
router.push('/'); // 访问首页

这段代码演示了如何使用 beforeEach 进行身份验证，beforeResolve 进行额外检查，afterEach 进行页面统计。打开浏览器的控制台，你就能看到导航守卫的执行顺序和输出信息。

执行顺序总结：

为了方便大家记忆，我给大家总结一个口诀：

“前置大哥先开路，解析二哥细检查，后置小弟来收尾，路由跳转乐无涯。”

用表格来表示：

阶段	守卫/钩子	作用	返回值/参数
导航触发
前置守卫	`beforeEach`	检查是否允许导航到目标路由，进行身份验证、权限控制等	`to` (目标路由对象), `from` (当前路由对象), `next` (放行/中断导航)
组件内守卫	`beforeRouteEnter`, `beforeRouteUpdate`, `beforeRouteLeave` (组件内部定义)	在组件级别进行更细粒度的控制	`to`, `from`, `next`
异步路由解析		解析异步组件，加载数据等
解析守卫	`beforeResolve`	确保所有组件和异步路由都解析完毕后执行	`to`, `from`, `next`
导航完成
后置钩子	`afterEach`	导航完成后执行，进行页面统计、滚动条复位等	`to`, `from`

next() 函数：导航的开关

在 beforeEach 和 beforeResolve 守卫中，你会看到一个 next() 函数。这个函数非常重要，它决定了导航是否继续进行。

next(): 放行，允许导航到下一个路由。
next(false): 中断导航，停留在当前路由。
next('/') 或 next({ path: '/' }): 重定向到指定的路由。
next(error): 如果发生错误，可以传递一个 Error 对象给 next()，Vue Router 会停止导航，并将错误传递给全局错误处理函数（如果定义了）。

组件内的守卫：更精细的控制

除了全局导航守卫，Vue Router 还提供了组件内的守卫，允许你在组件内部对路由进行更精细的控制。这些守卫包括：

beforeRouteEnter(to, from, next): 在组件被创建之前调用，此时组件实例还未创建，所以不能访问 this。
beforeRouteUpdate(to, from, next): 在当前组件被复用时调用，比如路由参数发生了变化。
beforeRouteLeave(to, from, next): 在离开当前组件对应的路由时调用。

组件内的守卫可以让你在组件级别进行一些特定的操作，比如在离开页面前提示用户保存数据。

高级用法：元信息 (Meta Fields)

Vue Router 允许你在路由配置中添加 meta 字段，用于存储一些自定义的信息。这些信息可以在导航守卫中访问，用于进行更灵活的控制。

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: { template: '<div>Admin Page</div>' },
      meta: { requiresAuth: true, role: 'admin' } // 添加元信息
    }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    // 检查是否已登录
    const isLoggedIn = localStorage.getItem('isLoggedIn');
    if (!isLoggedIn) {
      next('/login');
    } else {
      // 检查用户角色
      const userRole = localStorage.getItem('userRole');
      if (to.meta.role === 'admin' && userRole !== 'admin') {
        next('/forbidden'); // 没有权限
      } else {
        next();
      }
    }
  } else {
    next();
  }
});

在上面的例子中，我们在 /admin 路由的 meta 字段中添加了 requiresAuth 和 role 字段。在 beforeEach 守卫中，我们可以根据这些字段来判断用户是否需要登录，以及是否有权限访问该页面。

最佳实践：一些小建议

保持守卫函数的简洁: 导航守卫应该只负责简单的逻辑，避免在其中进行复杂的计算或网络请求。如果需要进行复杂的操作，可以将其放在单独的函数或模块中。
避免死循环: 在 beforeEach 守卫中重定向时，要小心避免死循环。比如，如果你的登录页面也需要登录才能访问，可能会导致无限重定向。
使用 async/await: 如果你的导航守卫中需要进行异步操作，建议使用 async/await 来简化代码，提高可读性。
合理使用 meta 字段: meta 字段可以帮助你更好地组织和管理路由信息，提高代码的可维护性。
考虑用户体验: 在进行身份验证、权限控制等操作时，要考虑到用户体验，给出友好的提示信息，避免让用户感到困惑。

总结：导航守卫，路由的守护者

导航守卫是 Vue Router 中非常重要的一个特性，它可以让你在路由发生变化时执行自定义逻辑，实现身份验证、权限控制、数据加载等功能。掌握导航守卫的用法，可以让你更好地控制应用的路由行为，提高应用的安全性和用户体验。

希望今天的讲座能帮助你更好地理解 Vue Router 的导航守卫。记住，代码就像女朋友，需要你去了解她、呵护她，才能让她为你所用。

感谢各位的收听，下次再见！

发表回复 取消回复

发表回复取消回复