v6路由权限验证

React Router v6的路由权限验证实现

在React Router v6中，路由权限验证需要通过新的API来实现。相比v5，v6移除了Route组件的component和render属性，转而使用element属性来渲染组件。

基本权限验证实现

首先创建一个权限验证高阶组件：

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

const 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;
};

路由配置示例

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />, // 公开路由
  },
  {
    path: '/dashboard',
    element: (
      <ProtectedRoute requiredRole="admin">
        <Dashboard />
      </ProtectedRoute>
    ),
  },
  {
    path: '/profile',
    element: (
      <ProtectedRoute>
        <Profile />
      </ProtectedRoute>
    ),
  }
]);

function App() {
  return <RouterProvider router={router} />;
}

复杂权限场景

对于更复杂的权限控制，可以结合useLocation和自定义Hook：

const useAuth = () => {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    // 模拟认证逻辑
    const token = localStorage.getItem('token');
    if (token) {
      // 验证token并获取用户信息
      setUser({ id: 1, roles: ['user', 'admin'] });
    }
  }, []);
  
  return user;
};

注意事项

1. v6不再支持Route组件的component属性，必须使用element
2. 权限验证需在路由层级进行，避免组件内部验证
3. 建议统一管理认证状态和权限逻辑
4. 使用Navigate组件进行重定向时需要设置replace属性

通过以上方式可以实现完整的v6路由权限验证方案。