点退出后地址跳到 /login 页面却一片空白,控制台报 Uncaught (in promise) Error: Redirected when going from '/home' to '/login' via a navigation guard,登录态也没清掉,得手动改地址,路由状态也跟着乱了。第一次遇到会往复杂处想,其实漏掉的多是个小前提。
router.beforeEach((to, from, next) => {
if (!token) return next('/login');
next();
});
守卫里先 next('/login') 又执行了 next(),同一轮导航被取消并重定向,第二个 next 让这次跳转作废,拦截器里再跳一次也会这样,页面就一直停在空白。这一点先确认清楚,后面就不用反复试。
碰到「路由守卫 next 重复」这类问题,我习惯先把当前配置原样备份一份,改坏了立刻换回来,不用现场推。新版本先放一台机器上跑一天再全量,问题一般在这段时间暴露。
备份不是备了就行,恢复一次才算数,很多备份文件打开才发现是空的。
具体做法是,守卫里每个分支只允许调用一次 next,命中后立即结束;跳转之后直接 return,不要再往下执行第二个 next,避免重复导航;去掉 axios 拦截器里的整页跳转,只保留路由跳转。
改完照着核一遍,退出后直接落到登录页,控制台没有 navigation guard 报错,刷新也不会白屏,页面状态正常。
