Vue动态路由导航守卫配置问题：如何实现免登录访问动态路由且不破坏其他路由守卫功能

首先咱们来拆解下你遇到的两个核心问题：

1. 动态路由匹配失效的原因 #

你最初用whitelist.includes(to.path)属于精确匹配，但动态路由的实际访问路径是/dynamic_part/xxx（比如/dynamic_part/123），和白名单里的/dynamic_part/完全不相等，所以匹配失败是必然的。

2. 模糊匹配导致无限重定向的原因 #

改成whitelist.some(item => to.path.includes(item))后，问题出在白名单里的"/"——所有路径都包含"/"！比如用户登录后从/login跳转到/Products，此时to.path是/Products，它肯定包含"/"，所以会进入白名单分支。而此时token存在，你又执行了next({ name: "Products" })，这就触发了新一轮的导航守卫，to还是/Products，再次匹配"/"，再次跳转，形成无限循环，最终Vue Router抛出Redirected when going from "/login" to "/Products" via a navigation guard的错误。

正确的解决方案 #

方案一：用正则精准匹配白名单（适合不想改路由定义的场景） #

把白名单改成正则数组，针对不同路由写精准的匹配规则，避免模糊匹配的漏洞：

router.beforeEach((to, from, next) => { 
  const token = window.sessionStorage.getItem("local_token"); 
  // 正则白名单：精准匹配根路径、登录、注册，以及dynamic_part开头的所有子路径
  const whitelist = [
    /^\/$/,                  // 严格匹配 /
    /^\/register$/,          // 严格匹配 /register
    /^\/login$/,             // 严格匹配 /login
    /^\/dynamic_part\/.*$/   // 匹配 /dynamic_part/xxx、/dynamic_part/yyy等所有动态子路径
  ]; 

  const isInWhitelist = whitelist.some(rule => rule.test(to.path));

  if (isInWhitelist) { 
    if (token) { 
      // 已登录时，仅在访问登录/注册页时跳转到Products，其他白名单页面（比如动态路由）正常放行
      if (to.name === "Login" || to.name === "Register") {
        next({ name: "Products" });
      } else {
        next();
      }
    } else { 
      next(); 
    } 
  } else { 
    if (token) { 
      next(); 
    } else { 
      next({ name: "Login" }); 
    } 
  } 
});

方案二：用路由元信息（Meta）管理权限（推荐，更易维护） #

这种方式把权限配置和路由定义绑定在一起，逻辑更清晰，也不会出现匹配错误：

第一步：在路由定义中添加meta字段

const routes = [
  { path: "/", name: "Home", meta: { requiresAuth: false } },
  { path: "/register", name: "Register", meta: { requiresAuth: false } },
  { path: "/login", name: "Login", meta: { requiresAuth: false } },
  { path: "/dynamic_part/:id", name: "DynamicPart", meta: { requiresAuth: false } }, // 动态路由无需认证
  { path: "/Products", name: "Products", meta: { requiresAuth: true } }, // 受保护路由需要认证
  // 其他受保护路由都加上meta: { requiresAuth: true }
];

第二步：简化导航守卫逻辑

router.beforeEach((to, from, next) => { 
  const token = window.sessionStorage.getItem("local_token"); 

  // 路由无需认证的情况
  if (!to.meta.requiresAuth) {
    // 已登录时，禁止访问登录/注册页，跳转到Products
    if (token && (to.name === "Login" || to.name === "Register")) {
      next({ name: "Products" });
    } else {
      next(); // 未登录或访问其他白名单页面（比如动态路由）直接放行
    }
  } else {
    // 路由需要认证的情况
    if (token) {
      next(); // 已登录直接放行
    } else {
      next({ name: "Login" }); // 未登录跳登录页
    }
  }
});

这个方案的好处是，后续新增路由时，只需要在路由定义里设置requiresAuth即可，不需要修改导航守卫的白名单，维护成本更低。

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