JavaScript 中怎么处理路由守卫中未命中重定向分支的覆盖率-js教程-PHP中文网

路由守卫未命中重定向分支本质是逻辑盲区，如返回undefined、未调用next()或条件遗漏；须显式且仅调用一次next()，测试需覆盖所有状态，ts类型守卫+运行时fallback可防漏。

javascript 中怎么处理路由守卫中未命中重定向分支的覆盖率

路由守卫中未命中重定向分支，本质是代码存在逻辑盲区——比如守卫返回了 undefined、没显式调用 next()、或条件判断遗漏了某些路径状态。这类分支在单元测试中容易被忽略，导致覆盖率下降，更关键的是可能引发白屏、卡死等线上问题。

明确守卫的终态出口规则

Vue Router 的导航守卫（如 beforeEach）必须**显式调用 next() 且仅调用一次**，否则导航会挂起。未命中重定向分支，往往是因为：

if/else 或 switch 缺少 else / default 分支，导致部分情况未调用 next()
异步逻辑中（如权限校验）未处理拒绝（catch）或未兜底调用 next()
早期 return 或 throw 错误，跳过了后续 next()

用测试覆盖所有守卫出口路径

写单元测试时，不要只测“能进首页”，而要枚举所有可能的路由状态组合：

jm-jsjkxyjs02-pzl-803

查询全球任意城市的实时天气和未来天气预报

下载

用户已登录 + 目标路由需登录 → 应 next()
用户未登录 + 目标路由需登录 → 应 next('/login')
用户已登录 + 目标路由需管理员权限但当前是普通用户 → 应 next('/403') 或 next(false)
守卫中 API 请求失败 → 必须有 catch 并调用 next('/error') 或类似兜底

推荐使用 jest.mock('vue-router') 模拟 createRouter 和 useRouter，再通过 router.push() 触发守卫，并用 jest.fn() 替换 next 来断言其调用参数和次数。

用 TypeScript + Exhaustiveness Check 防漏

对路由元信息（meta）做类型约束，配合 switch + as const + never 类型守卫，让 TS 在编译期报错未处理的 case：

type RouteGuardType = 'public' | 'auth' | 'admin';
const guardMap: Record<routeguardtype routelocationnormalized> boolean> = {
  public: () => true,
  auth: (to) => !!userStore.token,
  admin: (to) => userStore.role === 'admin'
};

// 若新增 guard 类型但没更新此处，TS 会提示类型不匹配
function getGuardType(to: RouteLocationNormalized): RouteGuardType {
  return to.meta?.guard as RouteGuardType || 'public';
}

// 守卫主逻辑
router.beforeEach((to, from, next) => {
  const type = getGuardType(to);
  switch (type) {
    case 'public': next(); break;
    case 'auth': if (guardMap.auth(to)) next(); else next('/login'); break;
    case 'admin': if (guardMap.admin(to)) next(); else next('/403'); break;
    default: 
      // TS 确保这里永远不会执行，否则说明 enum 或类型定义没同步
      const _exhaustiveCheck: never = type;
      console.error('Unhandled guard type:', type);
      next('/error');
  }
});
</routeguardtype>