v6路由权限控制

React Router v6 路由权限控制实践

React Router v6 相比 v5 在路由权限控制方面有了显著变化，主要体现在 useNavigate 和 useLocation 钩子的使用上。本文将分享如何在 v6 中实现安全的路由权限控制。

核心变化

v6 中移除了 Switch 组件，改用 Routes，同时路由匹配机制变为严格匹配。权限控制逻辑需要通过 useNavigate 和 useLocation 来实现。

实现方案

// 权限守卫组件
const ProtectedRoute = ({ children }) => {
  const navigate = useNavigate();
  const location = useLocation();
  
  useEffect(() => {
    const isAuthenticated = checkUserAuth(); // 自定义认证检查
    if (!isAuthenticated) {
      navigate('/login', { 
        replace: true,
        state: { from: location } 
      });
    }
  }, [navigate, location]);
  
  return children;
};

使用示例

<Routes>
  <Route path="/login" element={<Login />} />
  <Route 
    path="/dashboard" 
    element={
      <ProtectedRoute>
        <Dashboard />
      </ProtectedRoute>
    }
  />
</Routes>

高级权限控制

对于更细粒度的权限控制，可以结合角色系统：

const RoleBasedRoute = ({ roles, children }) => {
  const userRole = getUserRole();
  const hasPermission = roles.includes(userRole);
  
  if (!hasPermission) {
    return <Navigate to="/unauthorized" replace />;
  }
  
  return children;
};

通过以上方式，可以在 v6 中实现灵活且安全的路由权限控制。