v6路由权限分级管理

React Router v6 路由权限分级管理实践

React Router v6 相比 v5 在路由管理上有了重大变革，特别是 useNavigate 和 useRoutes 的引入，使得权限控制更加灵活。本文将详细介绍如何在 v6 中实现路由权限分级管理。

核心变化

v6 中移除了 Switch 组件，改为使用 useRoutes 进行路由配置，并且路由守卫机制需要重新设计。权限控制不再依赖于组件级别的路由守卫，而是通过路由配置和导航守卫实现。

实现方案

// 权限级别定义
const PERMISSIONS = {
  GUEST: 0,
  USER: 1,
  ADMIN: 2
};

// 路由配置
const routes = [
  {
    path: '/login',
    element: <Login />, 
    permission: PERMISSIONS.GUEST
  },
  {
    path: '/dashboard',
    element: <Dashboard />, 
    permission: PERMISSIONS.USER
  },
  {
    path: '/admin',
    element: <Admin />, 
    permission: PERMISSIONS.ADMIN
  }
];

// 权限检查组件
function PrivateRoute({ element, permission }) {
  const navigate = useNavigate();
  const userRole = useAppSelector(state => state.user.role);

  useEffect(() => {
    if (userRole < permission) {
      navigate('/login');
    }
  }, [userRole, permission, navigate]);

  return element;
}

// 路由渲染
function AppRoutes() {
  const userRole = useAppSelector(state => state.user.role);
  
  const filteredRoutes = routes.filter(route => 
    route.permission <= userRole || route.permission === PERMISSIONS.GUEST
  );

  return (
    <Routes>
      {filteredRoutes.map((route, index) => (
        <Route 
          key={index} 
          path={route.path} 
          element={<PrivateRoute element={route.element} permission={route.permission} />}
        />
      ))}
    </Routes>
  );
}