Vue3路由导航守卫无限重定向问题求助（Google Auth场景）

问题原因 #

你的导航守卫第二个分支逻辑存在错误：当已登录且从login页面跳转至cms时，调用next({ name: "cms" })会再次触发beforeEach守卫，导致循环调用，最终抛出无限重定向错误。

修复步骤 #

修改路由守卫代码，移除错误的跳转逻辑，直接允许进入目标路由：

router.beforeEach(async (to, from, next) => {
  // 未登录且访问cms时，跳转到登录页
  if (!store.state.loggedIn && to.name === "cms") {
    return next({ name: "login" });
  }
  // 已登录且访问cms时，直接放行
  else if (store.state.loggedIn && to.name === "cms") {
    console.log("test");
    return next(); // 此处改为直接放行，而非重复跳转
  }
  // 其他情况正常放行
  else {
    return next();
  }
});

也可以简化逻辑，只针对未登录访问cms的情况拦截，其余场景直接放行：

router.beforeEach(async (to, from, next) => {
  const isLoggedIn = store.state.loggedIn;
  // 仅当访问cms且未登录时，跳转至登录页
  if (to.name === "cms" && !isLoggedIn) {
    next({ name: "login" });
  } else {
    // 所有其他场景（包括已登录访问cms）直接放行
    next();
  }
});

额外建议 #

不要直接修改store.state.loggedIn，Vuex/Pinia要求通过mutation（或action）修改状态，避免状态管理混乱：

// 在store中定义mutation
mutations: {
  setLoggedIn(state, value) {
    state.loggedIn = value;
  }
}

// 在组件中调用修改状态
store.commit('setLoggedIn', true);

内容的提问来源于stack exchange，提问作者Dylan52