Rumah > Soal Jawab > teks badan
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
.
P粉1658237832023-12-30 00:39:57
menjadi berlebihan apabila cms
已经是当前路由时,执行 next({ name: "cms" })
是错误的。它应该是 next()
,然后 else if
:
if (!store.state.loggedIn && to.name === "cms") { return next({ name: "login" }); } else { return next(); }