React Router v6 路由安全策略实践
React Router v6 的升级带来了许多改进，其中路由安全策略的强化值得重点关注。本文将从实际应用场景出发，分享 v6 版本中路由安全的最佳实践。
路由守卫配置
在 v6 中，通过 useRoutes 和 useNavigate 实现更灵活的安全控制。首先创建一个基础的路由守卫组件：
const ProtectedRoute = ({ children }) => {
const navigate = useNavigate();
const isAuthenticated = useAuth(); // 自定义认证钩子
useEffect(() => {
if (!isAuthenticated) {
navigate('/login', { replace: true });
}
}, [isAuthenticated, navigate]);
return isAuthenticated ? children : null;
};
权限路由配置
在路由配置中应用守卫：
const routes = [
{
path: '/dashboard',
element: (
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
)
}
];
路由参数验证
v6 中通过 useParams 结合参数校验确保路由安全：
const UserPage = () => {
const { userId } = useParams();
// 参数合法性检查
if (!userId || !/^[0-9]+$/.test(userId)) {
return <Navigate to='/404' />;
}
return <UserProfile userId={userId} />;
};
完整安全路由示例
function App() {
const routes = useRoutes([
{
path: '/',
element: <Home />
},
{
path: '/login',
element: <Login />
},
{
path: '/admin',
element: (
<ProtectedRoute>
<Admin />
</ProtectedRoute>
)
}
]);
return routes;
}
通过以上策略，可以有效防止未授权访问和路由参数注入等安全问题。
讨论