react-router-dom v6嵌套路由守卫问题:pass_expire状态可访问Home路由
问题原因分析
你的Guard2守卫存在逻辑缺陷:当status为"pass_expire"时,守卫没有返回任何导航拦截组件,导致路由直接渲染Home页面。当前Guard2仅在status为"success"时返回<Outlet />,但不满足条件的分支未做处理,相当于默认允许访问。
修复方案
修改Guard2的代码,补充不满足权限时的导航逻辑:当status为"pass_expire"时跳转到重置密码页面,未登录状态下跳转到登录页面。
修改后的Guard2.js代码:
const Guard2 = () => { const { status } = responseData(); if (status && status !== "pass_expire") { return <Outlet />; } // 不满足权限时的跳转逻辑 if (status === "pass_expire") { return <Navigate to="/resetPass" />; } return <Navigate to="/login" />; };
额外验证
主路由中的通配符路由逻辑是正确的,它会在用户访问未知路由时根据status跳转到对应页面,但本次权限问题的核心原因是Guard2的拦截逻辑缺失,修复后即可实现预期的权限控制。
内容的提问来源于stack exchange,提问作者kavandalal
相关产品推荐
相关产品推荐

