Beim Navigationswächter ist ein unendlicher Umleitungsfehler aufgetreten: Nicht abgefangen (Versprochen)

Question

Ich habe einen vue3-Router, der die folgende Routendefinition verwendet

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

Ich versuche, eine Google-Authentifizierungs-Anmeldefunktion zu implementieren, bei der nur ein bestimmtes Konto auf den /cms-Pfad zugreifen kann, wenn es angemeldet ist. Ich habe einen booleschen Wert namens „loggedIn“ im Store, der in der Komponente auf „true“ umgestellt wird. Als Bild

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

Im Router führe ich eine beforeEach-Aktion aus, um zu prüfen, zu welcher Seite weitergeleitet werden soll, basierend darauf, woher der Benutzer kommt und ob der bestimmte Benutzer angemeldet ist (wie im Bild gezeigt).

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

Alles scheint gut zu funktionieren, außer wenn der richtige Benutzer angemeldet ist. Nicht abgefangener (Versprechen) Fehler: Im Navigationsschutz wurde eine unendliche Weiterleitung ausgelöst, und die Seite wurde nicht zu /cms 而是选择留在 /login umgeleitet und entschied sich stattdessen dafür, auf der Seite /login zu bleiben.

Answer 1

当 cms 已经是当前路由时，执行 next({ name: "cms" }) 是错误的。它应该是 next()，然后 else if 就变得多余了：

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