Penyemak imbas menjadi tidak bertindak balas apabila menggunakan beforeEach

Question

Saya cuba menyediakan beberapa laluan dalam apl saya yang boleh dan tidak boleh diakses oleh pengguna, tetapi kadangkala penyemak imbas saya membeku dan tidak memberikan sebarang mesej ralat kepada saya, jadi saya tidak tahu apa yang saya lakukan salah.

Pada IF pertama saya menyemak sama ada laluan memerlukan pengesahan untuk diakses benar dan jika palsu saya menghantar pengguna ke halaman log masuk. Saya kemudian menyemak kumpulan mana pengguna berada dan jika gagal, ubah hala ke halaman akar "/". Jika tiada pernyataan IF ini benar, saya hanya mengubah hala ke halaman yang pengguna ingin navigasi.

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

Memandangkan anda tidak menggunakan pernyataan "lain", anda memanggil next() beberapa kali dan terperangkap dalam gelung tak terhingga (seperti yang dinyatakan dalam ulasan).

Anda boleh menggunakan return untuk menghentikan kod pada ketika ini.

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;