如何利用`Vue Router`的`beforeEach`进行全局路由守卫？

Vue Router 全局路由守卫：beforeEach 的深度剖析

大家好，今天我们来深入探讨 Vue Router 中的 beforeEach 钩子，它是实现全局路由守卫的关键。路由守卫允许我们在导航发生之前、发生时和发生之后进行拦截和处理，从而实现诸如权限验证、页面访问控制、数据预取等功能。beforeEach 作为全局前置守卫，在每次路由跳转前都会被调用，为我们提供了强大的控制能力。

什么是全局路由守卫？

在单页面应用 (SPA) 中，路由跳转实际上是组件的切换，而不是传统的页面刷新。全局路由守卫，顾名思义，就是作用于整个应用的路由守卫。它们允许我们在路由发生变化时，执行一些全局性的逻辑，例如：

• 权限验证: 检查用户是否已登录，是否具有访问特定页面的权限。
• 日志记录: 记录用户的访问路径和时间。
• 数据预取: 在页面渲染之前，预先加载所需的数据。
• 页面统计: 统计页面的访问量。
• 路由重定向: 根据某些条件，将用户重定向到不同的页面。

beforeEach 的基本用法

beforeEach 是 Vue Router 提供的一个全局前置守卫。它的基本语法如下：

router.beforeEach((to, from, next) => {
  // ... 在路由跳转前的逻辑处理
  next(); // 必须调用 next() 来 resolve 这个钩子
});

• router: Vue Router 实例。
• beforeEach: 注册全局前置守卫的方法。
• (to, from, next) => { ... }: 回调函数，在每次路由跳转前执行。
  • to: 即将要进入的目标 路由对象。
  • from: 当前导航正要离开的路由对象。
  • next: 一个函数，必须调用来 resolve 这个钩子。执行的效果依赖 next 方法调用的参数：
    • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (有效)。
    • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
    • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true 或 keep-alive: true 的选项。
    • next(error): (2.4.0+) 如果传入 next 一个 Error 实例，那么导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

重要提示： 必须调用 next() 函数来 resolve 钩子。否则，路由导航将会被阻塞，页面将不会跳转。

to 和 from 路由对象

to 和 from 都是路由对象，包含了当前路由的信息。它们都具有以下属性：

| 属性名 | 类型 | 描述

next 的使用场景与参数

next 函数是 beforeEach
在 Vue Router中用于控制流程的关键，它接受一个参数，这个参数会影响到路由的行为。下面我们来详细分析各种情况：

1. next()：允许通行，继续执行后续流程

这是最常见的用法，next() 不带任何参数调用时，表示当前路由守卫已经处理完毕，可以继续执行后续的路由钩子，直到最后完成路由导航。

使用场景：

• 当路由满足所有条件，允许正常访问时，例如用户已登录且拥有访问权限。
• 当不需要执行任何特殊操作，只需要让路由按照默认流程进行时。

代码示例：

router.beforeEach((to, from, next) => {
  // 检查用户是否已经登录（假设已经有登录状态的判断逻辑）
  if (isLoggedIn()) {
    next(); // 用户已登录，允许继续导航
  } else {
    // 用户未登录，跳转到登录页，这里不处理
    // 稍后会有更详细的例子
  }
});

2. next(false)：取消导航

next(false) 会中断当前的导航。这意味着：

• to 路由不会被加载。
• from 路由保持不变，用户仍然停留在当前页面。
• 如果浏览器的 URL 因为这次导航而改变了（例如用户点击了浏览器的前进或后退按钮），URL 将会被重置为 from 路由对应的 URL。

使用场景：

• 当用户没有权限访问某个页面时，阻止其导航。
• 当需要满足某些条件才能进入某个页面，但条件不满足时。

代码示例：

router.beforeEach((to, from, next) => {
  // 检查用户是否拥有访问 to.meta.requiresAuth 页面所需的权限
  if (to.meta.requiresAuth && !hasPermission(to.meta.requiresAuth)) {
    // 用户没有权限，取消导航
    next(false);
  } else {
    next();
  }
});

在这个例子中，我们假设 to.meta.requiresAuth 定义了访问当前页面所需的权限，而 hasPermission 函数用于检查用户是否拥有该权限。如果用户没有权限，next(false) 将会阻止导航。

3. next(path) 或 next({ path: ... })：重定向到另一个路由

next(path) 或 next({ path: ... }) 会中断当前的导航，并开始一个新的导航到指定的路径。

使用场景：

• 当用户未登录时，将其重定向到登录页面。
• 当用户访问一个不存在的页面时，将其重定向到首页或 404 页面。
• 根据用户的角色，将其重定向到不同的页面。

代码示例：

router.beforeEach((to, from, next) => {
  // 检查用户是否已登录
  if (!isLoggedIn() && to.path !== '/login') {
    // 用户未登录，并且访问的不是登录页面，重定向到登录页面
    next('/login');
  } else {
    next();
  }
});

在这个例子中，如果用户未登录，并且访问的不是登录页面，next('/login') 将会把用户重定向到登录页面。

你也可以传递一个包含 path 的对象，例如 next({ path: '/login' })，效果是一样的。 你还可以传递其他选项，例如 query、params 等：

router.beforeEach((to, from, next) => {
  if (!isLoggedIn() && to.path !== '/login') {
    next({
      path: '/login',
      query: { redirect: to.fullPath } // 将用户尝试访问的页面路径作为参数传递给登录页
    });
  } else {
    next();
  }
});

这个例子在重定向到登录页时，将用户尝试访问的页面路径作为 redirect 参数传递给登录页。登录成功后，登录页可以根据这个参数将用户重定向到原来的页面。

4. next(error)：中断导航并传递错误

next(error) (在 Vue Router 2.4.0+ 版本中引入) 会中断当前的导航，并将错误传递给 router.onError() 注册的回调函数。

使用场景：

• 当在路由守卫中发生错误时，例如数据获取失败。
• 当需要全局处理路由错误时。

代码示例：

router.beforeEach((to, from, next) => {
  getData()
    .then(data => {
      // ...
      next();
    })
    .catch(error => {
      // 数据获取失败，中断导航并传递错误
      next(error);
    });
});

router.onError(error => {
  console.error('路由导航发生错误:', error);
  // 可以根据错误类型进行不同的处理，例如显示错误提示信息
  alert('发生错误，请稍后重试');
});

在这个例子中，如果在 getData() 函数中发生错误，next(error) 将会中断导航，并将错误传递给 router.onError() 注册的回调函数。回调函数会打印错误信息，并显示一个错误提示信息。

meta 字段的使用

meta 字段允许我们在路由配置中添加自定义的数据。这些数据可以在路由守卫中访问，从而实现更灵活的控制。

示例：

const routes = [
  {
    path: '/admin',
    component: AdminPage,
    meta: { requiresAuth: 'admin' } // 需要管理员权限
  },
  {
    path: '/profile',
    component: ProfilePage,
    meta: { requiresAuth: 'user' } // 需要用户权限
  },
  {
    path: '/public',
    component: PublicPage
    // 不需要权限
  }
];

在上面的例子中，我们为 /admin 路由添加了 requiresAuth: 'admin' 的 meta 字段，表示访问该页面需要管理员权限。为 /profile 路由添加了 requiresAuth: 'user' 的 meta 字段，表示访问该页面需要用户权限。

在 beforeEach 钩子中，我们可以通过 to.meta 访问这些数据：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    // 检查用户是否拥有访问该页面的权限
    if (hasPermission(to.meta.requiresAuth)) {
      next();
    } else {
      next('/login'); // 重定向到登录页面
    }
  } else {
    next(); // 不需要权限，直接通行
  }
});

完整的权限控制示例

现在，我们来构建一个完整的权限控制示例，演示如何使用 beforeEach 和 meta 字段实现权限验证。

1. 定义路由配置：

const routes = [
  {
    path: '/',
    component: HomePage
  },
  {
    path: '/login',
    component: LoginPage
  },
  {
    path: '/admin',
    component: AdminPage,
    meta: { requiresAuth: 'admin' }
  },
  {
    path: '/profile',
    component: ProfilePage,
    meta: { requiresAuth: 'user' }
  }
];

2. 实现 beforeEach 钩子：

router.beforeEach((to, from, next) => {
  const isLoggedIn = () => localStorage.getItem('token'); // 模拟登录状态
  const getUserRole = () => localStorage.getItem('role'); // 模拟用户角色

  if (to.meta.requiresAuth) {
    // 需要权限验证
    if (!isLoggedIn()) {
      // 用户未登录，重定向到登录页面
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      // 用户已登录，检查权限
      const userRole = getUserRole();
      if (userRole === to.meta.requiresAuth) {
        // 权限匹配，允许访问
        next();
      } else {
        // 权限不匹配，重定向到首页或者显示无权限页面
        alert('没有权限访问该页面');
        next('/');
      }
    }
  } else {
    // 不需要权限验证，直接通行
    next();
  }
});

3. 模拟登录和获取用户角色：

// 模拟登录函数
function login(role) {
  localStorage.setItem('token', 'fake_token');
  localStorage.setItem('role', role);
}

// 模拟登出函数
function logout() {
  localStorage.removeItem('token');
  localStorage.removeItem('role');
}

4. 在组件中使用：

在 LoginPage 组件中，调用 login 函数模拟登录，并设置用户的角色。在需要权限的组件中，可以根据用户的角色显示不同的内容。

代码解释：

• isLoggedIn() 函数用于检查用户是否已登录，这里简单地通过检查 localStorage 中是否存在 token 来判断。
• getUserRole() 函数用于获取用户的角色，这里简单地从 localStorage 中获取。
• 如果路由配置中定义了 requiresAuth 字段，表示访问该页面需要权限验证。
• 如果用户未登录，重定向到登录页面，并将用户尝试访问的页面路径作为 redirect 参数传递给登录页。
• 如果用户已登录，检查用户的角色是否与 requiresAuth 字段的值匹配。如果匹配，允许访问；否则，重定向到首页或者显示无权限页面。
• 如果路由配置中没有定义 requiresAuth 字段，表示该页面不需要权限验证，直接允许访问。

这个示例演示了如何使用 beforeEach 和 meta 字段实现基本的权限控制。你可以根据实际需求进行修改和扩展。

避免 beforeEach 钩子中的常见错误

在使用 beforeEach 钩子时，需要注意避免以下常见错误：

• 忘记调用 next() 函数: 如果忘记调用 next() 函数，路由导航将会被阻塞，页面将不会跳转。
• 无限循环重定向: 如果在 beforeEach 钩子中重定向到同一个页面，可能会导致无限循环重定向。例如：

router.beforeEach((to, from, next) => {
  if (!isLoggedIn()) {
    next('/login');
  } else if (to.path === '/login') {
    next('/login'); // 错误：无限循环重定向
  } else {
    next();
  }
});

在这个例子中，如果用户已登录，并且访问的是登录页面，next('/login') 会再次将用户重定向到登录页面，导致无限循环。正确的做法是直接调用 next()，允许用户访问登录页面。

• 过度复杂的逻辑: 尽量保持 beforeEach 钩子中的逻辑简洁明了，避免过度复杂的逻辑。如果逻辑过于复杂，可以将其拆分成多个函数，或者使用其他的路由守卫（例如 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）。
• 异步操作未处理: 在 beforeEach 钩子中进行异步操作时，必须确保异步操作完成后再调用 next() 函数。例如：

router.beforeEach((to, from, next) => {
  // 错误：异步操作未处理
  setTimeout(() => {
    // ...
    next();
  }, 1000);
});

在这个例子中，setTimeout 是一个异步操作。在 setTimeout 中的回调函数执行之前，beforeEach 钩子就已经结束了，导致路由导航可能不正确。正确的做法是使用 Promise 或 async/await 来处理异步操作。

总结与思考

今天，我们详细探讨了 Vue Router 的全局前置守卫 beforeEach，它为我们提供了强大的路由控制能力。我们学习了 beforeEach 的基本用法，to 和 from 路由对象，next 函数的各种用法，meta 字段的使用，以及如何使用 beforeEach 和 meta 字段实现权限控制。

理解 beforeEach 的使用，能够灵活地处理页面跳转前的各种逻辑，例如权限验证和重定向等，能够有效提升用户体验。