beforeEach を使用するとブラウザが応答しなくなる

Question

ユーザーがアクセスできるルートとアクセスできないルートをアプリケーションに設定しようとしていますが、時々ブラウザがフリーズしてエラー メッセージが表示されないため、何が間違っているのかわかりません。

最初の IF では、ルートがアクセスに true の認証を必要とするかどうかを確認し、false の場合は、ユーザーをログイン ページに送信します。次に、ユーザーがどのグループに属しているかを確認し、それが失敗した場合はルート ページ「/」にリダイレクトします。これらの IF ステートメントがどれも当てはまらない場合は、ユーザーが移動したいページにリダイレクトするだけです。

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

      const isAuth = localStorage.getItem("auth");
      const userGroupRaw = localStorage.getItem("userData");
      const accessGroup = to.meta.group;
      ユーザーグループを許可します。
      if (userGroupRaw) {
        userGroup = JSON.parse(userGroupRaw).id_access;
      }
    
      if (to.matched.some((record) =>record.meta.requiresAuth)) {
        console.log("if1");
        if (isAuth === "false") {
          next({ パス: "/login" });
        }
        もし （
          (アクセスグループ === 1 && (ユーザーグループ === 3 || ユーザーグループ === 4)) ||
          ！ユーザー・グループ
        ) {
          next({ パス: "/" });
        }
    
        次（）;
      }
    
      次（）;
    });
    デフォルトルーターをエクスポート;

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;
  ユーザーグループを許可します。
  if (userGroupRaw) {
    userGroup = JSON.parse(userGroupRaw).id_access;
  }

  if (to.matched.some((record) => Record.meta.requiresAuth)) {
    if (isAuth === "false") {
        次へ戻る({
            パス：「/ログイン」
        });
    }
    もし （
        (アクセスグループ === 1 && (ユーザーグループ === 3 || ユーザーグループ === 4)) ||
        ！ユーザー・グループ
    ) {
        次へ戻る({
            パス： "/"
        });
    }
    // next(); - 先行する next が常に呼び出されるため、これは必要ありません。
  }
  次（）;
})

デフォルトルーターをエクスポート;