Saya mempunyai penghala vue3 menggunakan definisi laluan berikut

const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
  {
    path: "/gallery",
    name: "gallery",
    component: () =>
      import(/* webpackChunkName: "gallery" */ "../views/GalleryView.vue"),
  },
  {
    path: "/cms",
    name: "cms",
    component: () =>
      import(/* webpackChunkName: "cms" */ "../views/CmsView.vue"),
  },
  {
    path: "/login",
    name: "login",
    component: () =>
      import(/* webpackChunkName: "cms" */ "../components/Login/LoginPage.vue"),
  },
];

Saya cuba melaksanakan ciri log masuk Pengesahan Google di mana hanya akaun tertentu boleh mengakses laluan /cms jika log masuk. Saya mempunyai boolean yang dipanggil logMasuk di kedai yang akan bertukar kepada benar dalam komponen. Seperti gambar

<script setup>
import { decodeCredential, googleLogout } from "vue3-google-login";
import store from "@/store/index";
import router from "@/router/index";
const callback = (response) => {
  const userData = decodeCredential(response.credential);
  if (userData.email === "my_email") {
    store.state.loggedIn = true;
    router.push({ path: "/cms" });
  } else {
    store.state.loggedIn = false;
    googleLogout();
  }
};
</script>

Dalam penghala, saya melakukan sebelumSetiap tindakan untuk menyemak halaman yang hendak dihalakan berdasarkan dari mana pengguna datang dan sama ada pengguna tertentu dilog masuk (seperti yang ditunjukkan dalam gambar).

router.beforeEach(async (to, from, next) => {
  // If not logged in and trying to access cms
  if (!store.state.loggedIn && to.name === "cms") {
    return next({ name: "login" });
  }
  // If logged in and trying to access cms after login
  else if (store.state.loggedIn && to.name === "cms" && from.name === "login") {
    console.log("test");
    return next({ name: "cms" });
  }
  // Else just route to next page
  else {
    return next();
  }
});

Semuanya nampaknya berfungsi dengan baik kecuali apabila pengguna yang betul telah log masuk. Ralat Tidak Ditangkap (Janji): Ubah hala yang tidak terhingga telah dilemparkan ke dalam pengawal navigasi, dan halaman itu tidak diubah hala ke /cms 而是选择留在 /login dan sebaliknya memilih untuk kekal di halaman /login.