Vue Router 前置守卫：防止无限重定向

在使用 Vue Router 的过程中，我们经常会使用前置守卫来控制路由访问权限。然而，如果在守卫逻辑中没有妥善处理，就可能导致无限重定向的问题。本文将介绍如何使用前置守卫来防止无限重定向，并提供两种解决方案。

问题描述

假设我们有一个简单的登录系统，用户只有登录后才能访问某些页面。我们使用前置守卫来检查用户的登录状态，如果用户未登录，则将其重定向到登录页面。

router.beforeEach(async (to, from, next) => {
  const token = localStorage.getItem('token');
  const rolesLocal = sessionStorage.getItem('roles');
  const requiresAuth = to.meta.requiresAuth;
  const roles = to.meta.roles;
// 如果该路由有权限且未登录，则跳转登录页面
if (requiresAuth && !token && !roles) {
alert("请先登录！");
if (to.path === '/login') { // 如果当前路由是登录页面，则放行
next();
} else {
next("/login");
}
} else {
if (rolesLocal === "admin" && to.path !== "/home") {
next("/home");
} else if (rolesLocal === "teacher" && to.path !== "/teacherhome") {
next("/teacherhome");
} else if (rolesLocal === "user" && to.path !== "/userhome") {
next("/userhome");
} else {
next();
}
}
});

如果用户未登录，且尝试访问需要登录的页面，那么守卫会将其重定向到登录页面。然而，如果用户在登录页面中仍然未登录，那么守卫会再次执行，并再次将用户重定向到登录页面，从而陷入无限重定向的循环。

解决方案

为了解决这个问题，我们需要确保守卫逻辑不会导致无限重定向。以下是两种常见的解决方案：

1. 避免重复判断

我们可以使用一个标记来记录当前是否正在进行重定向操作。如果当前正在重定向，则不再进行重定向判断。

let isRedirecting = false;
router.beforeEach(async (to, from, next) => {
  if (isRedirecting) {
    return next();
  }
  isRedirecting = true;
  // ... 重定向逻辑 ...
  isRedirecting = false;
});

2. 使用 next(false) 阻止后续守卫执行

当我们进行重定向时，可以使用 `next(false)` 来阻止后续守卫的执行。这样可以避免守卫多次执行，从而导致无限重定向。

router.beforeEach(async (to, from, next) => {
  // ... 重定向逻辑 ...
  if (requiresAuth && !token && !roles) {
    next(false);
    // ...
  } else {
    // ...
  }
});

总结

无限重定向是一个常见的问题，可以通过适当的守卫逻辑来避免。本文介绍了两种常见的解决方法，希望对你有所帮助。

原文地址: https://www.cveoy.top/t/topic/pRl4 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录