路由权限校验：v6最佳实践

React Router v6的发布带来了许多改进，其中路由权限校验的实现方式也发生了重要变化。在v6中，我们不再使用<Route>组件的component属性，而是采用更灵活的element属性来渲染组件。本文将分享在v6中实现路由权限校验的最佳实践。

首先，我们需要创建一个自定义Hook来处理权限检查：

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

const useAuth = () => {
  const navigate = useNavigate();
  
  const checkPermission = (requiredRole) => {
    const userRole = localStorage.getItem('userRole');
    if (!userRole || userRole !== requiredRole) {
      navigate('/unauthorized');
      return false;
    }
    return true;
  };
  
  return { checkPermission };
};

然后在路由配置中使用：

import { Routes, Route } from 'react-router-dom';

const ProtectedRoute = ({ requiredRole, children }) => {
  const { checkPermission } = useAuth();
  
  useEffect(() => {
    checkPermission(requiredRole);
  }, [requiredRole]);
  
  return children;
};

<Routes>
  <Route path="/admin" element={
    <ProtectedRoute requiredRole="admin">
      <AdminPanel />
    </ProtectedRoute>
  } />
</Routes>

这种方式相比v5更加清晰，也更容易维护。同时，建议配合useEffect和useNavigate来处理重定向逻辑，确保权限验证的及时性。

在实际项目中，还可以将权限检查逻辑封装到更高级别的组件中，比如创建一个PermissionGate组件来统一管理权限控制，这样可以大大提高代码复用性和可维护性。