Vue 3 + Vue Router 4.0路由无限重定向问题求助

问题场景 #

使用Vue 3 + Vue Router 4.0构建带认证授权的路由系统，路由配置与导航守卫代码如下，访问/login路由时触发无限重定向警告：

路由配置代码 #

const routes = [
  {
    path: "/",
    name: "home",
    component: Home,
  },
  {
    path: "/home",
    component: Home,
    meta: { requiresAuth: false }
  },
  {
    path: "/login",
    component: Login,
    meta: { requiresAuth: false }
  },
  // 其他路由...
]

导航守卫代码 #

router.beforeEach(async(to) => {
  //todo : get the store here 
  const user = JSON.parse(localStorage.getItem('user'));
  const loggedIn = localStorage.getItem('user') == null ? false : true;
  const roleId = user ? user.role_id : 'UNKNOWN';
  const authorizedRoles = to.meta.authorizedRoles ? Array.from(to.meta.authorizedRoles) : [];
  
  // no authentication required
  if (!to.meta.requireAuth) {
    console.log('no authorization required')
    return { path: to.fullPath}
  }
  // 其他逻辑...
})

触发的警告 #

[Vue Router warn]: Detected an infinite redirection in a navigation guard when going from "/" to "/login".

错误原因 #

1. 拼写不一致：路由配置中meta字段是requiresAuth（带s），但导航守卫里判断的是requireAuth（不带s），导致所有路由都会进入“不需要认证”的分支。
2. 错误的导航返回值：在不需要认证的分支中返回{ path: to.fullPath }，这会触发一次新的导航到当前路径，新导航又会进入同一个守卫逻辑，形成无限循环。

修复方案 #

1. 修正拼写错误 #

将守卫中的!to.meta.requireAuth改为!to.meta.requiresAuth，确保与路由配置的meta字段一致。

2. 正确放行无需认证的路由 #

无需认证的路由直接放行，不需要返回重定向对象，Vue Router会自动继续导航。如果需要明确返回，可返回true。

3. 补充根路由的meta配置 #

根路径"/"未设置requiresAuth，补上配置避免逻辑歧义。

修复后的完整代码 #

修正后的路由配置

const routes = [
  {
    path: "/",
    name: "home",
    component: Home,
    meta: { requiresAuth: false } // 补充meta配置
  },
  {
    path: "/home",
    component: Home,
    meta: { requiresAuth: false }
  },
  {
    path: "/login",
    component: Login,
    meta: { requiresAuth: false }
  },
  // 其他需要认证的路由示例
  {
    path: "/dashboard",
    component: Dashboard,
    meta: { requiresAuth: true, authorizedRoles: [1, 2] }
  },
  // 其他路由...
]

修正后的导航守卫

router.beforeEach(async(to) => {
  // 优化登录状态判断，避免JSON解析失败
  let user = null;
  try {
    user = JSON.parse(localStorage.getItem('user'));
  } catch (e) {
    localStorage.removeItem('user'); // 清除损坏的存储数据
  }
  const loggedIn = !!user;
  const roleId = user?.role_id || 'UNKNOWN';
  const authorizedRoles = to.meta.authorizedRoles ? [...to.meta.authorizedRoles] : [];
  
  // 无需认证的路由直接放行
  if (to.meta.requiresAuth === false) {
    console.log('no authorization required');
    return; // 或返回true
  }

  // 需要认证的路由逻辑
  if (!loggedIn) {
    // 未登录则跳转到登录页
    return { path: '/login' };
  }

  // 权限校验逻辑
  if (authorizedRoles.length > 0 && !authorizedRoles.includes(roleId)) {
    // 无权限则跳转到首页或无权限页面
    return { path: '/' };
  }

  // 所有校验通过，放行
  return;
})

额外说明 #

• 处理localStorage时建议加try-catch，避免存储的JSON格式损坏导致解析错误。
• 登录状态判断使用!!user更简洁可靠。
• 权限校验逻辑可根据实际业务需求调整。

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