URLPattern 路由匹配与安全过滤实践

URLPattern 路由匹配与安全过滤实践概述URLPattern 提供声明式的 URL 匹配与参数提取，适用于路由匹配、白名单校验与安全过滤，确保客户端与服务端一致的行为。关键参数/概念`new URLPattern({ pathname: '/users/:id' })`: 声明路由模式。`pattern.test(url)`: 判断是否匹配；`pattern.exec(url)`: 提取参数。集成 Navigation API：对 `destination.url` 做白名单与参数校验。实践/示例const userDetail = new URLPattern({ pathname: "/users/:id" });

const userList = new URLPattern({ pathname: "/users" });

navigation.addEventListener("navigate", (event: any) => {

if (!event.canIntercept) return;

const url = new URL(event.destination.url);

if (!(userDetail.test(url) || userList.test(url))) return; // 非目标路由放行

event.intercept({

handler: async () => {

const match = userDetail.exec(url);

const id = match?.pathname.groups?.id;

const endpoint = id ? `/api/users/${id}` : "/api/users";

const data = await fetch(endpoint, { cache: "no-store" }).then((r) => r.json());

renderUsers(data);

},

});

});

验证方法参数正确性：构造不同路径与边界值，验证 `exec` 提取的参数与类型。安全过滤：以黑/白名单对比策略验证拦截与放行路径是否符合预期。注意事项兼容性：URLPattern 在 Chromium 系浏览器支持较好，其他浏览器需降级到正则匹配。性能：匹配规则不宜过度复杂，避免客户端匹配耗时影响导航体验。