v6版本路由权限控制最佳实践

React Router v6的发布带来了路由管理的重大变革，其中权限控制机制的重构尤为值得关注。在v6中，我们不再使用<Route>组件的component属性，而是采用element属性来传递组件。这种变化为权限控制提供了更灵活的实现方式。

核心实现思路

在v6中，我们可以通过自定义路由组件来实现权限校验。首先创建一个ProtectedRoute组件：

const ProtectedRoute = ({ children }) => {
  const isAuthenticated = useAuth(); // 自定义认证hook
  const location = useLocation();

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

  return children;
};

然后在路由配置中使用：

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

进阶权限控制

对于更复杂的权限需求，可以结合useNavigate和useLocation实现细粒度的权限验证：

const PrivateRoute = ({ roles = [] }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const { user } = useAuth();

  useEffect(() => {
    if (!user || !roles.some(role => user.roles.includes(role))) {
      navigate('/unauthorized', { replace: true });
    }
  }, [user, roles, navigate]);

  return user && roles.some(role => user.roles.includes(role)) ? <Outlet /> : null;
};