Le garde de navigation a rencontré une erreur de redirection infinie : non capturé (promesse)

Question

J'ai un routeur vue3 utilisant la définition de route suivante

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"),
  },
];

J'essaie de mettre en œuvre une fonctionnalité de connexion par authentification Google où seul un compte spécifique peut accéder au chemin /cms s'il est connecté. J'ai un booléen appeléLoggedIn dans le magasin qui deviendra vrai dans le composant. Comme photo

<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>

Dans le routeur, j'effectue une action beforeEach pour vérifier vers quelle page acheminer en fonction de la provenance de l'utilisateur et si l'utilisateur spécifique est connecté (comme indiqué sur l'image).

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();
  }
});

Tout semble bien fonctionner, sauf lorsque le bon utilisateur est connecté. Erreur non interceptée (promesse) : une redirection infinie a été lancée dans la garde de navigation, et la page n'a pas été redirigée vers /cms 而是选择留在 /login et a plutôt choisi de rester sur la page /login.

Answer 1

devient redondant lorsque cms 已经是当前路由时，执行 next({ name: "cms" }) 是错误的。它应该是 next()，然后 else if :

if (!store.state.loggedIn && to.name === "cms") {
    return next({ name: "login" });
  }
  else {
    return next();
  }