ProtectedRoute 路由守卫
最后更新：2026-10-28
ProtectedRoute 路由守卫
路由守卫是「进入页面前先检查权限」的模式：包一层 ProtectedRoute，未登录就重定向到 /login 并记录来源页，登录后回跳。React 没有内置守卫，靠条件渲染 + Navigate/useNavigate 组合实现。
| 分组 | 路由与状态管理 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
import { Navigate, Outlet } from 'react-router-dom'
function ProtectedRoute({ isAuth }) {
if (!isAuth) {
// 未登录：重定向到登录页，state 记住「从哪来」
return <Navigate to="/login" replace state={{ from: location.pathname }} />
}
return <Outlet /> // 已登录：渲染子路由
}
// 用法：
// <Route element={<ProtectedRoute isAuth={user} />}>
// <Route path="/admin" element={<Admin />} />
// </Route>⚙️ 参数
| isAuth（自行约定） | 权限判定：布尔、角色数组或异步状态均可，由你的登录态决定。 |
|---|---|
| redirect（自行约定） | 未通过时的去向：重定向地址或提示 UI，按项目需要设计。 |
返回值：无返回值，作为编码模式使用
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
未登录点「管理后台」被拦到登录页；点「去登录并回跳」后成功进入后台——对应 Navigate 重定向 + 登录后回跳的守卫流程（模拟演示）。💡 要点
⚠️ 注意 前端守卫只是体验层：静态资源与接口仍能被直接访问，敏感数据必须由服务端再校验一次权限。
💡 提示 重定向时把来源页存进 state（from: location.pathname），登录成功后 navigate(state.from ?? '/home') 实现精准回跳。
ℹ️ 说明 权限来自异步请求（如 /me 接口）时，守卫先显示 loading 再放行，避免「闪一下登录页」。
🏷️ 路由与状态管理相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q Navigate 组件和 useNavigate 有何区别？
A Navigate 是「渲染即跳转」，适合在 JSX 分支里声明式重定向；useNavigate 是命令式函数，适合事件回调。两者底层相同。
Q 登录后怎么回到原来想去的页面？
A 重定向前存 state={{ from: location.pathname }}，登录成功后 navigate(location.state?.from ?? '/home')。
Q 角色权限（admin/vip）怎么扩展？
A 把 isAuth 换成角色判断：守卫内检查 allowedRoles.includes(user.role)，再包一层 RoleRoute 组件即可复用。
