根据你提供的代码和错误信息,问题出在路由导航守卫的逻辑上。具体来说,当用户未登录(没有 token)时,你将用户重定向到 /login
页面。然而,如果该页面也有某种逻辑会导致再次触发这个守卫,就会形成无限重定向。
解决方案
检查是否是目标路由:在重定向之前,应检查当前路径是否已经是
/login
,如果是,则不要再执行重定向。这样可以防止循环重定向的问题。示例代码修正:
// 路由鉴权(对应条件下访问不同路由)
import router from "./router";
// 引入用户仓库
import { useUserStore } from "@/store";
// 引入进度条插件和样式
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
// 全局前置守卫
router.beforeEach((to, from, next) => {
const userStore = useUserStore();
// 开启进度条
NProgress.start();
if (userStore.token) {
// 存在token
if (to.path === '/login') {
// 在有token的情况下访问登录页
next('/'); // 中止到首页
// 结束进度条
NProgress.done();
} else {
next(); // 正常继续访问目标路由
}
} else {
// 没有token则跳转到登录页,避免无限重定向到/login
if (to.path !== '/login') {
next('/login');
} else {
next(); // 如果已经是在/login,不做任何事情继续留在此路由。
}
NProgress.done();
}
});
// 全局后置守卫
router.afterEach((to, from) => {
NProgress.done();
});
主要修改点:
- 在判断
else
分支中增加了一个检查:只有当目标路径不为/login
时才执行next('/login')
,这能有效防止循环重定向。
确保在你的应用程序中,这样的逻辑能正确处理认证状态,从而避免引发无限重定向的情况。
内容由零声教学AI助手提供,问题来源于学员提问