Vue3的全局路由守卫详解

Vue3的全局路由守卫详解

在 Vue 3 中，全局路由守卫（Global Guards）用于在导航过程中执行一些全局的逻辑，例如权限验证、页面加载前的准备工作、记录用户行为等。Vue Router 提供了三种类型的全局路由守卫：

1. 全局前置守卫（Global Before Guards）：在每次导航开始之前调用。
2. 全局解析守卫（Global Resolve Guards）：在导航被确认之前，但解析组件之后调用。
3. 全局后置守卫（Global After Hooks）：在导航完成后调用。

1. 全局前置守卫（beforeEach）

beforeEach 是最常用的全局前置守卫，它会在每次路由切换之前被调用。您可以在这个守卫中执行一些全局的逻辑，比如检查用户是否已登录、设置页面标题、记录用户访问的 URL 等。

使用方法：

import { createRouter, createWebHistory } from 'vue-router';
import { useAuthStore } from '@/store/auth'; // 假设您使用 Vuex 或 Pinia 进行状态管理

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 您的路由配置
  ]
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const authStore = useAuthStore(); // 获取认证状态
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth); // 检查目标路由是否需要认证

  if (requiresAuth && !authStore.isAuthenticated) {
    // 如果目标路由需要认证且用户未登录，重定向到登录页面
    next({ name: 'Login' });
  } else {
    // 否则继续导航
    next();
  }
});

export default router;

参数说明：

• to: 即将要进入的目标路由对象。
• from: 当前导航正要离开的路由对象。
• next: 必须调用此函数来解析导航。它可以接受以下参数：
  • next(): 继续导航。
  • next(false): 中断当前的导航，停留在当前页面。
  • next('/') 或 next({ path: '/' }): 跳转到指定的路径或路由。
  • next(error): 如果传入一个 Error 实例，则导航会被中断，并触发全局错误处理程序（如果有）。

2. 全局解析守卫（beforeResolve）

beforeResolve 是在导航被确认之后，但在组件实例被创建之前调用的。这个守卫可以用于在组件渲染之前获取数据或执行其他异步操作。

使用方法：

router.beforeResolve((to, from, next) => {
  // 在这里可以执行一些异步操作，例如获取数据
  // 例如，确保某个 API 请求完成后再渲染页面
  fetchData().then(() => {
    next();
  }).catch(() => {
    next(false); // 如果请求失败，取消导航
  });
});

3. 全局后置守卫（afterEach）

afterEach 是在导航完成后调用的，它不会接收 next 函数，因此不能影响导航过程。通常用于记录日志、分析用户行为、设置页面标题等。

使用方法：

router.afterEach((to, from) => {
  // 设置页面标题
  document.title = to.meta.title || '默认页面标题';

  // 记录用户访问的 URL
  console.log(`Navigated to: ${to.fullPath}`);
});

参数说明：

• to: 导航完成后进入的目标路由对象。
• from: 导航完成前离开的路由对象。

4. 结合使用多个守卫

您可以结合使用多个全局守卫来实现更复杂的逻辑。例如，您可以在 beforeEach 中进行权限验证，然后在 beforeResolve 中获取数据，最后在 afterEach 中设置页面标题。

router.beforeEach((to, from, next) => {
  const authStore = useAuthStore();
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if (requiresAuth && !authStore.isAuthenticated) {
    next({ name: 'Login' });
  } else {
    next();
  }
});

router.beforeResolve((to, from, next) => {
  // 在这里可以执行一些异步操作，例如获取数据
  fetchData().then(() => {
    next();
  }).catch(() => {
    next(false);
  });
});

router.afterEach((to, from) => {
  document.title = to.meta.title || '默认页面标题';
  console.log(`Navigated to: ${to.fullPath}`);
});

5. 导航守卫中的异步操作

在全局守卫中，您可以使用 async/await 来处理异步操作，使代码更加简洁和易读。

示例：使用 async/await 处理异步操作

router.beforeEach(async (to, from, next) => {
  const authStore = useAuthStore();
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if (requiresAuth && !authStore.isAuthenticated) {
    next({ name: 'Login' });
  } else {
    // 异步获取数据
    try {
      await fetchData();
      next();
    } catch (error) {
      next(false);
    }
  }
});

6. 全局守卫中的取消导航

在某些情况下，您可能希望取消用户的导航请求。可以通过调用 next(false) 来实现这一点。例如，如果用户尝试访问一个需要登录的页面，但尚未登录，您可以取消导航并提示用户先登录。

router.beforeEach((to, from, next) => {
  const authStore = useAuthStore();
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if (requiresAuth && !authStore.isAuthenticated) {
    alert('请先登录！');
    next(false); // 取消导航
  } else {
    next();
  }
});

7. 全局守卫中的重定向

您还可以在全局守卫中使用 next() 函数将用户重定向到其他页面。例如，当用户访问一个不存在的页面时，您可以将其重定向到 404 页面。

router.beforeEach((to, from, next) => {
  const routeExists = to.matched.length > 0;

  if (!routeExists) {
    next({ name: 'NotFound' }); // 重定向到 404 页面
  } else {
    next();
  }
});

8. 全局守卫中的错误处理

如果您在全局守卫中遇到了错误，可以通过 next(error) 将错误传递给 Vue Router 的全局错误处理程序（如果有）。如果没有全局错误处理程序，Vue Router 会抛出该错误。

router.beforeEach((to, from, next) => {
  try {
    // 执行一些可能会抛出错误的操作
    someFunctionThatMightThrowAnError();
    next();
  } catch (error) {
    next(error); // 传递错误给全局错误处理程序
  }
});

总结

Vue 3 的全局路由守卫提供了强大的工具，帮助您在导航过程中执行各种全局逻辑。通过合理使用 beforeEach、beforeResolve 和 afterEach，您可以轻松实现权限验证、数据预取、页面标题设置等功能。此外，结合 async/await 和 next() 的灵活使用，可以让您的路由守卫代码更加简洁和易于维护。

参考链接

• Vue Router 官方文档 - 导航守卫
• Vue Router 官方文档 - 全局前置守卫
• Vue Router 官方文档 - 全局解析守卫
• Vue Router 官方文档 - 全局后置钩子