v6路由权限验证问题排查：自定义守卫实现方式

在React Router v6升级过程中，路由权限验证是一个常见但容易出现问题的场景。本文将详细探讨v6中自定义守卫的实现方式。

问题背景

v6相比v5最大的变化之一是移除了<Route>组件的component和render属性，改为使用element属性来渲染组件。这使得权限验证逻辑需要重新设计。

核心实现方案

方案一：自定义Hook + Route Element

// 权限检查Hook
const useAuth = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  
  useEffect(() => {
    // 模拟认证检查
    const checkAuth = async () => {
      const token = localStorage.getItem('token');
      if (token) {
        try {
          const response = await authAPI.verify(token);
          setIsAuthenticated(response.data.isValid);
        } catch {
          setIsAuthenticated(false);
        }
      }
    };
    checkAuth();
  }, []);
  
  return { isAuthenticated };
};

// 自定义守卫组件
const ProtectedRoute = ({ children }) => {
  const { isAuthenticated } = useAuth();
  
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  
  return children;
};

// 路由配置
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route 
          path="/dashboard" 
          element={
            <ProtectedRoute>
              <Dashboard />
            </ProtectedRoute>
          }
        />
      </Routes>
    </Router>
  );
}

方案二：自定义Route组件

const AuthRoute = ({ path, element, ...props }) => {
  const { isAuthenticated } = useAuth();
  
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  
  return (
    <Route path={path} element={element} {...props} />
  );
};

// 使用方式
<AuthRoute path="/admin" element={<AdminPanel />} />