v6版本路由安全加固

React Router v6 路由安全加固实践

React Router v6 在带来更简洁API的同时，也引入了新的安全考量。本文将重点介绍如何在v6版本中加固路由安全。

1. 路由权限控制升级

v5中使用<Route>的component属性进行权限判断，v6则推荐使用useNavigate和useLocation结合自定义Hook实现：

const ProtectedRoute = ({ children }) => {
  const navigate = useNavigate();
  const location = useLocation();
  
  useEffect(() => {
    if (!isAuthenticated()) {
      navigate('/login', { replace: true });
    }
  }, [location]);
  
  return children;
};

2. 路由参数验证

v6中推荐使用useParams配合参数校验：

const UserProfile = () => {
  const { userId } = useParams();
  
  // 参数验证
  if (!userId || !isValidId(userId)) {
    return <Navigate to="/404" />;
  }
  
  return <div>用户信息: {userId}</div>;
};

3. 防止路由注入攻击

通过白名单机制限制路由访问：

const routeWhitelist = ['/dashboard', '/profile', '/settings'];

const SecurityGuard = ({ children }) => {
  const location = useLocation();
  
  if (!routeWhitelist.includes(location.pathname)) {
    return <Navigate to="/403" />;
  }
  
  return children;
};