v6版本路由权限管理方案

React Router v6 路由权限管理方案

React Router v6 的发布带来了许多重要变化，其中路由权限管理的实现方式发生了显著改变。本文将详细阐述在 v6 版本中如何构建有效的路由权限控制方案。

核心变化

v6 中移除了 Switch 组件，改为使用 Routes 组件，并且路由匹配逻辑从严格匹配改为按路径匹配。同时，useRouteMatch 和 useHistory 等 API 被废弃，需要采用新的 Hook 来实现功能。

权限管理实现方案

1. 创建权限验证组件

const ProtectedRoute = ({ children, requiredRoles }) => {
  const { user, permissions } = useAuth();
  const location = useLocation();

  if (!user) {
    return <Navigate to="/login" state={{ from: location }} />;
  }

  if (requiredRoles && !requiredRoles.some(role => permissions.includes(role))) {
    return <Navigate to="/unauthorized" />;
  }

  return children;
};

2. 路由配置示例

<Routes>
  <Route path="/dashboard" element={
    <ProtectedRoute requiredRoles={["admin", "user"]}>
      <Dashboard />
    </ProtectedRoute>
  } />
  <Route path="/admin" element={
    <ProtectedRoute requiredRoles={["admin"]}>
      <AdminPanel />
    </ProtectedRoute>
  } />
</Routes>

3. 自定义 Hook 实现权限检查

export const usePermission = (requiredPermissions) => {
  const { permissions } = useAuth();
  
  return useMemo(() => {
    if (!permissions) return false;
    return requiredPermissions.every(permission => 
      permissions.includes(permission)
    );
  }, [permissions, requiredPermissions]);
};

通过以上方案，我们能够有效实现 v6 版本的路由权限控制，确保应用的安全性与用户体验。

总结

v6 的路由权限管理虽然需要调整实现方式，但提供了更灵活的组件化控制能力。建议在升级过程中逐步迁移，确保现有功能不受影响。