Vue Navigation Guard 无限重定向

Question

我有一个导航守卫如下：

import authConfig from "./auth.config";
 
export function authGuard(to,from, next) {
    const publicPages = [
      '/login', 
      '/register', 
      '/home', 
      '/forgotpassword',
     
    ];
    const authRequired = !publicPages.includes(to.path);
    const loggedIn = localStorage.getItem(authConfig.USER_LOCAL_STORAGE_KEY);   
    let resetPasswordRequired = true
        
    if (authRequired && !loggedIn ) {     
        return next('/login');        
    }       

    if(loggedIn && resetPasswordRequired) {
      return next('/resetpassword')
    }

    else return next();
    
}

没有重置密码的 if 块，它工作正常。

我不明白为什么会出现无限重定向错误。

有什么想法吗？

谢谢

Answer 1

您当前在以下位置有无限重定向：

if(loggedIn && resetPasswordRequired) {
  return next('/resetpassword')
}

由于 let resetPasswordRequired = true，resetPasswordRequired 始终为真，而 loggedIn 变为真，您的代码最终总是重定向到 /resetpassword.

一种方法是在登录期间将信息存储在本地存储中，如果用户确实需要在重定向之前重置其密码并将此信息设置为 false。

另一种方法是将 resetPasswordRequired 的状态保存在商店中并在重定向之前更改它的状态。

第三种方法是在登录页面上管理更改密码的过程，如果用户需要在登录期间从数据库中重置其初始密码，则接收信息。

Vue Navigation Guard 无限重定向

Vue Navigation Guard Infinite Redirection

javascript

guard

vue.js