v6路由守卫与权限控制结合

React Router v6的路由守卫与权限控制结合是升级过程中的核心议题。在v6中，useRoutes和useNavigate等API的变更使得传统的路由守卫实现方式需要重构。

核心实现方案

1. 自定义Hook封装

const useAuth = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    // 检查认证状态
    const checkAuth = async () => {
      const token = localStorage.getItem('token');
      if (token) {
        try {
          const response = await fetch('/api/auth/check', {
            headers: { Authorization: `Bearer ${token}` }
          });
          setIsAuthenticated(response.ok);
        } catch {
          setIsAuthenticated(false);
        }
      }
      setLoading(false);
    };
    checkAuth();
  }, []);
  
  return { isAuthenticated, loading };
};

2. 路由守卫组件

const ProtectedRoute = ({ children }) => {
  const { isAuthenticated, loading } = useAuth();
  const navigate = useNavigate();
  
  useEffect(() => {
    if (!loading && !isAuthenticated) {
      navigate('/login', { replace: true });
    }
  }, [isAuthenticated, loading, navigate]);
  
  if (loading) return <div>Loading...</div>;
  return isAuthenticated ? children : null;
};

3. 路由配置整合

const App = () => {
  const routes = useRoutes([
    { path: '/', element: <Home /> },
    { 
      path: '/dashboard', 
      element: (
        <ProtectedRoute>
          <Dashboard />
        </ProtectedRoute>
      ) 
    },
    { path: '/login', element: <Login /> }
  ]);
  
  return routes;
};

迁移注意事项

• v6移除了Switch组件，需使用useRoutes替代
• 权限控制逻辑需要与路由配置解耦，提高可维护性
• 建议统一管理认证状态，避免重复请求

此方案在实际项目中已验证可用，建议按需调整权限检查逻辑。