【愚公系列】《循序渐进Vue.js 3.x前端开发实践》060-Vue Router的路由导航守卫

🚀前言

在现代单页面应用（SPA）的开发中，确保用户体验的流畅性和安全性是至关重要的。而 Vue Router 作为 Vue.js 的官方路由管理工具，提供了强大的路由导航守卫功能，让我们能够在路由切换的不同阶段进行各种控制和处理。通过导航守卫，我们可以轻松地管理用户的访问权限、数据加载、路由跳转前的验证等，确保应用的稳定与安全。

本文将深入探讨 Vue Router 的路由导航守卫，包括全局守卫、路由独享守卫和组件内守卫的使用方法。我们将详细讲解每种守卫的作用、使用场景，并通过实际案例展示如何在路由切换前后进行各种逻辑处理。无论是保护敏感页面的访问，还是在切换路由前进行数据预取，导航守卫都能为我们的应用提供强有力的支持。

🚀一、Vue Router的路由导航守卫

在 Vue Router 中，导航守卫主要用于在路由跳转过程中，决定是否允许或阻止某次跳转。通过这些守卫，可以实现权限控制、数据加载等功能。

🔎1. 全局导航守卫

全局导航守卫是指在应用级别设置的守卫，所有路由的跳转都会经过这些守卫。常用的全局守卫有 beforeEach（前置守卫）和 afterEach（后置守卫）。

🦋1.1 定义全局前置导航守卫

通过 beforeEach 方法，可以为路由实例注册一个全局的前置守卫。每当发生路由跳转时，beforeEach 方法都会被触发。

示例代码：

const router = createRouter({
  history: createWebHashHistory(),
  routes: routes // 我们定义的路由配置对象
});

router.beforeEach((to, from) => {
  // 将要跳转到的路由对象
  console.log(to);
  // 当前将要离开的路由对象
  console.log(from);

  // 返回 true 表示允许此次跳转，返回 false 表示禁止此次跳转
  return false; // 这样所有的路由跳转都会被禁止
});

在上面的代码中，beforeEach 方法的返回值可以是布尔值。如果返回 false，导航会被阻止。如果返回 true，导航会继续。如果返回的是一个路由配置对象，可以实现路由重定向。

例如，假设我们需要检查用户的登录状态，如果没有登录，则重定向到登录页面：

const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
});

router.beforeEach((to, from) => {
  if (to.name !== 'setting') { // 如果不是跳转到 'setting' 路由
    return { name: 'setting', params: { id: '000' } }; // 重定向到 'setting' 路由
  }
});

🦋1.2 定义全局后置导航守卫

全局后置守卫 afterEach 允许你在导航完成后执行某些操作。与前置守卫不同，后置守卫不会影响导航的结果，它更多用于页面分析或监控。

示例代码：

const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
});

router.afterEach((to, from, failure) => {
  console.log("跳转结束");
  console.log(to); // 当前跳转到的路由
  console.log(from); // 当前离开的路由
  console.log(failure); // 如果导航失败，记录失败原因
});

在 afterEach 中，除了接收 to 和 from 参数外，还接收 failure 参数。failure 用于记录导航异常信息。

🔎2. 为特定路由注册导航守卫

除了全局守卫，还可以为特定的路由设置导航守卫。这些守卫只会在访问某些路由时触发。

🦋2.1 在路由配置中使用 beforeEnter

在路由配置中，可以使用 beforeEnter 属性来为特定的路由配置守卫。beforeEnter 只会在进入该路由时触发，而不会在路由参数变化时触发。

示例代码：

const routes = [
  {
    path: "/demo1",
    component: Demo,
    name: 'Demo',
    beforeEnter: (to, from) => {
      console.log("进入 '/demo1' 路由");
      return false; // 阻止跳转
    }
  }
];

在上述代码中，当用户访问 /demo1 路由时，beforeEnter 守卫会被触发，并且返回 false 阻止跳转。

🦋2.2 在组件中使用导航守卫

在组件内部，可以使用 onBeforeRouteUpdate、onBeforeRouteLeave 和 onBeforeRouteEnter 来实现导航守卫。

1. onBeforeRouteUpdate：当路由参数变化时（例如，通过 URL 改变参数），会触发该方法。

import { onBeforeRouteUpdate } from 'vue-router';

onBeforeRouteUpdate((to, from) => {
  console.log("路由参数更新时的守卫");
  console.log(to, from);
});

2. onBeforeRouteLeave：当离开当前页面时触发。常用于提示用户是否保存数据。

import { onBeforeRouteLeave } from 'vue-router';

onBeforeRouteLeave((to, from) => {
  console.log("离开当前页面时的守卫");
  console.log(to, from);
});

3. onBeforeRouteEnter：在进入路由之前触发。需要注意的是，onBeforeRouteEnter 在组件实例尚未创建时就被调用，因此不能直接访问组件实例。

import { onBeforeRouteEnter } from 'vue-router';

onBeforeRouteEnter((to, from) => {
  console.log("进入当前页面时的守卫");
  console.log(to, from);
});

🔎3. Vue Router 导航流程总结

Vue Router 导航跳转的流程如下：

1. 导航被触发：可以通过 router-link、push 等方法或直接改变 URL 触发。
2. 进入将要失活的组件：调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 如果当前组件没有变化：调用组件内部的 beforeRouteUpdate 守卫。
5. 调用在路由配置中定义的 beforeEnter 守卫。
6. 解析异步路由组件。
7. 确认导航：完成路由跳转。
8. 调用全局的 afterEach 守卫。
9. 更新 DOM：页面内容更新，完成跳转。

通过上述流程，可以看到 Vue Router 在处理路由跳转时是非常灵活和可控的。你可以在不同阶段对导航进行拦截、重定向或执行其他逻辑。

🔎4.总结

1. 全局导航守卫：beforeEach 用于前置守卫，afterEach 用于后置守卫。前置守卫决定是否允许跳转，后置守卫用于分析或监控跳转。
2. 特定路由守卫：beforeEnter 可用于为特定路由注册守卫，onBeforeRouteUpdate 和 onBeforeRouteLeave 适用于组件级别的守卫。
3. 守卫流程：Vue Router 提供了一个完善的导航流程，你可以在每个阶段进行相应的操作。