v6路由安全加固

React Router v6相较于v5在路由管理上有了重大改进，但同时也带来了新的安全考量。本文将重点介绍如何在v6中加固路由安全。

路由权限控制

在v6中，我们可以通过useRoutes和Navigate组件实现更精细的权限控制：

import { useRoutes, Navigate } from 'react-router-dom';

function ProtectedRoute({ children, requiredRole }) {
  const user = useAuth(); // 假设存在认证hook
  
  if (!user) {
    return <Navigate to="/login" replace />;
  }
  
  if (requiredRole && !user.roles.includes(requiredRole)) {
    return <Navigate to="/unauthorized" replace />;
  }
  
  return children;
}

const routes = [
  {
    path: '/admin',
    element: (
      <ProtectedRoute requiredRole="admin">
        <AdminPanel />
      </ProtectedRoute>
    )
  }
];

路由参数验证

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

import { useParams, useNavigate } from 'react-router-dom';

function UserDetail() {
  const { userId } = useParams();
  const navigate = useNavigate();
  
  // 参数验证
  if (!userId || !/^[0-9]+$/.test(userId)) {
    navigate('/404');
    return null;
  }
  
  return <div>用户详情: {userId}</div>;
}

路由重定向安全

避免直接使用用户输入作为重定向目标：

// 不安全的做法
const redirectTo = new URLSearchParams(window.location.search).get('redirect');
return <Navigate to={redirectTo} />;

// 安全的做法
const safeRedirects = ['/dashboard', '/profile'];
const redirectTo = new URLSearchParams(window.location.search).get('redirect');
const isValidRedirect = safeRedirects.includes(redirectTo);
return <Navigate to={isValidRedirect ? redirectTo : '/dashboard'} />;

通过以上方法，可以有效防止路由注入攻击和不安全的重定向问题。