Der Browser reagiert nicht mehr, wenn beforeEach verwendet wird

Question

Ich versuche, einige Routen in meiner App einzurichten, auf die Benutzer zugreifen können und auf die nicht, aber manchmal friert mein Browser ein und zeigt mir keine Fehlermeldungen an, sodass ich nicht weiß, was ich falsch mache.

Im ersten IF überprüfe ich, ob die Route eine Authentifizierung erfordert, um auf „true“ zuzugreifen, und wenn „false“, sende ich den Benutzer zur Anmeldeseite. Anschließend überprüfe ich, zu welcher Gruppe der Benutzer gehört, und wenn dies fehlschlägt, leite ich zur Stammseite „/“ weiter. Wenn keine dieser IF-Anweisungen zutrifft, leite ich einfach zu der Seite weiter, zu der der Benutzer navigieren möchte.

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

由于您没有使用“else”语句，因此您多次调用 next() 并陷入无限循环（如评论中所述）。

您可以使用 return 来在此时停止代码。

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;