Le navigateur ne répond plus lors de l'utilisation de beforeEach

Question

J'essaie de configurer des itinéraires dans mon application auxquels les utilisateurs peuvent et ne peuvent pas accéder, mais parfois mon navigateur se bloque et ne me donne aucun message d'erreur, donc je ne sais pas ce que je fais de mal.

Dans le premier SI, je vérifie si l'itinéraire nécessite une authentification pour y accéder, vrai et si faux, j'envoie l'utilisateur vers la page de connexion. Je vérifie ensuite dans quel groupe se trouve l'utilisateur et si cela échoue, je le redirige vers la page racine "/". Si aucune de ces instructions IF n'est vraie, je redirige simplement vers la page vers laquelle l'utilisateur souhaite accéder.

router.beforeEach((to, from, next) => {

      const isAuth = localStorage.getItem("auth");
      const userGroupRaw = localStorage.getItem("userData");
      const accessGroup = to.meta.group;
      let userGroup;
      if (userGroupRaw) {
        userGroup = JSON.parse(userGroupRaw).id_access;
      }
    
      if (to.matched.some((record) => record.meta.requiresAuth)) {
        console.log("if1");
        if (isAuth === "false") {
          next({ path: "/login" });
        }
        if (
          (accessGroup === 1 && (userGroup === 3 || userGroup === 4)) ||
          !userGroup
        ) {
          next({ path: "/" });
        }
    
        next();
      }
    
      next();
    });
    export default router;

Answer 1

Comme vous n'avez pas utilisé d'instruction "else", vous avez appelé next() plusieurs fois et vous êtes resté coincé dans une boucle infinie (comme mentionné dans les commentaires).

Vous pouvez utiliser return pour arrêter le code à ce stade.

router.beforeEach((to, from, next) => {

  const isAuth = localStorage.getItem("auth");
  const userGroupRaw = localStorage.getItem("userData");
  const accessGroup = to.meta.group;
  let userGroup;
  if (userGroupRaw) {
    userGroup = JSON.parse(userGroupRaw).id_access;
  }

  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (isAuth === "false") {
        return next({
            path: "/login"
        }); 
    }
    if (
        (accessGroup === 1 && (userGroup === 3 || userGroup === 4)) ||
        !userGroup
    ) {
        return next({
            path: "/"
        });
    }
    // next(); - this is not needed as the preceding next always gets called.
  }
  next();
})

export default router;