白名单 Set 应存标准化匹配标识：精确路径（如"/login"）或前缀字符串（如"/admin"），而非完整URL或动态展开路径；校验时优先用has()精确匹配，前缀匹配则配合startsWith()高效处理。
用 Set 做前端路由白名单校验，核心在于利用其 O(1) 平均时间复杂度的 has() 查找能力，避免数组 includes() 或循环遍历的 O(n) 开销。关键不是“存路径”，而是“存标准化后的匹配标识”——比如精确路径、前缀路径或带通配逻辑的键。
白名单 Set 应该存什么？
直接存完整 URL 路径（如 "/admin/users"）只适用于**精确匹配**；若需支持前缀匹配（如 "/admin/*"），Set 本身不支持模糊查询，需配合简单规则。推荐策略：
-
精确白名单路径：直接存标准路径字符串，例如
new Set(["/login", "/404", "/about"])，校验时whitelist.has(path)即可 -
前缀白名单（如管理后台入口）：存前缀字符串，例如
new Set(["/admin", "/api"])，校验时用Array.from(whitelist).some(prefix => path.startsWith(prefix))—— 此时Set仍用于高效管理前缀集合，查找逻辑外移但结构清晰 -
避免动态生成大量 key：不要把
"/admin/*"拆成所有可能路径塞进 Set（如"/admin/users","/admin/roles"…），这失去意义且内存膨胀
结合路由守卫的实际写法
以 Vue Router 的 router.beforeEach 或 React Router 的 useNavigate + 自定义 hook 为例，白名单校验应轻量、同步、无副作用：
const publicRoutes = new Set([
'/login',
'/register',
'/reset-password',
'/health'
]);
// 精确匹配（最常用）
function isPublicRoute(path) {
return publicRoutes.has(path);
}
// 支持带查询参数的路径（如 /login?from=/dashboard）
function normalizePath(path) {
return path.split('?')[0].split('#')[0];
}
router.beforeEach((to, from, next) => {
const normalizedPath = normalizePath(to.path);
if (isPublicRoute(normalizedPath)) {
next();
} else {
// 检查登录态或跳转登录页
next('/login');
}
});
进阶：支持简单通配但不牺牲性能
如果必须支持类似 "/admin/**"，可用两个 Set 分层处理：
立即学习“Java免费学习笔记（深入）”；
-
exactWhitelist：存精确路径，用has()快速命中 -
prefixWhitelist：存前缀（如"/admin","/user"），用some()配合startsWith()，因前缀数量通常极少（ - 不推荐正则或路径解析库做白名单校验——增加包体积和执行开销，前端白名单本就应是静态、有限、明确的
注意事项与常见坑
Set 是值匹配，注意路径格式统一：
- 确保传入
has()的路径已去除末尾斜杠（"/home/" → "/home"）、标准化大小写（如有需要）、解码 URI 组件（decodeURIComponent(path)） - Vue Router 默认开启
history模式时，to.path已是干净路径；Hash 模式下注意去掉#后部分 - 不要在每次路由守卫中重新创建 Set，定义为模块级常量，初始化一次即可
