路由的“横切关注点”指不隶属具体页面却贯穿多路由的通用职责，如权限校验、登录检查、加载态控制、日志记录；权限校验具备跨路由复用、与业务解耦、可插拔集中管控三大特征；通过 useauthcheck、userouteguard 等 hook 封装，并结合 protectedroute 组件实现声明式保护，提升复用性、可维护性与可测试性。
路由的“横切关注点”指的是那些**不隶属于某个具体页面或业务逻辑，却贯穿多个路由路径的通用职责**，比如权限校验、登录状态检查、加载态控制、访问日志记录等。它不是某一个页面的核心功能，但几乎所有受保护的路由都需要它——就像一条线“横切”过整个路由系统。
为什么权限校验是典型的横切关注点
它天然具备三个特征：
- 跨路由复用：/dashboard、/settings、/users 等十几个页面都要判断“用户是否已登录”“是否有该菜单权限”，逻辑高度重复；
- 与业务解耦：权限逻辑不该写在 Dashboard 组件里，否则组件职责膨胀，也难统一更新；
- 可插拔、可集中管控：你希望在一处开关权限策略（比如临时关闭鉴权用于测试），而不是改遍所有页面。
用 Hooks 封装权限校验逻辑的关键做法
核心思路是把“检查 + 跳转 + 状态同步”抽成一个可复用的 Hook，让每个受保护路由按需调用，而非复制粘贴 if-else。
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- useAuthCheck：返回当前认证状态（isAuthenticated）、角色（role）、权限列表（permissions），内部自动从 localStorage 或 context 中读取，并支持异步刷新（如调用 /api/user/info）；
- useRouteGuard：接收目标路由的元信息（如 meta.requiresAuth、meta.roles），结合 useAuthCheck 结果，决定是否放行、重定向到登录页或 403 页；
- 配合 Outlet 和 element 封装 ProtectedRoute 组件：在 React Router v6 中，用嵌套路由 + 自定义 element 包裹子路由，内部调用上述 Hook，实现声明式保护。
实际封装示例（精简版）
比如定义一个 ProtectedRoute：
function ProtectedRoute({ children, requiredRoles = [] }) {
const { isAuthenticated, role, isLoading } = useAuthCheck();
const navigate = useNavigate();
if (isLoading) return <div>加载中...</div>;
if (!isAuthenticated) {
navigate('/login', { state: { from: location.pathname } });
return null;
}
if (requiredRoles.length && !requiredRoles.includes(role)) {
navigate('/403');
return null;
}
return children;
}
然后在路由配置中使用：
<route path="/admin" element="{<ProtectedRoute" requiredroles="{['admin']}"></route>}
>
<route index element="{<AdminDashboard"></route>} />
这样做的实际好处
- 新增一个需要权限的页面，只需加一行 element={
}，不用重写鉴权逻辑； - 修改权限规则（比如从角色制改为权限码制），只改 useAuthCheck 和 ProtectedRoute，全站生效；
- 便于单元测试：Hook 可独立 mock 输入输出，验证各种登录态、角色组合下的跳转行为。
