Vue Navigation Guard Infinite Redirection

Question

I have a navigation guard as follows:

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();
    
}

It works fine without the if block for resetpassword.

I cannot figure out why infinite redirect error occurs.

Any ideas?

Thanks

Answer 1

You currently have a infinite redirect at:

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

As resetPasswordRequired is always true due to let resetPasswordRequired = true and while loggedIn changes to true, your code always ends up redirecting to /resetpassword.

An approach could be to store information in local storage during login, if the user really needs to reset his passwort and set this information to false, before you redirecting.

Another approach would be to save the state of resetPasswordRequired in a store and change it´s state before redirecting.

The third approach would be to manage the process of changing the password on your login page and recieve information, if the user needs to reset his password initial, from a database during login.