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

在React Router v6中，路由权限验证成为开发中的重要话题。相比v5，v6采用了全新的路由结构和组件设计模式，传统的Route组件直接嵌套方式被移除，这使得自定义守卫的实现变得更加复杂。

v6权限验证核心问题

v6中，我们不能再使用<Route>组件的component或render属性来实现权限控制。当用户访问受保护路由时，需要通过自定义Hook或组件来判断用户是否具备访问权限。例如，在应用启动时，我们需要在路由配置中添加权限验证逻辑。

实现方案一：自定义Hook方式

const useAuth = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  useEffect(() => {
    // 模拟权限验证
    const token = localStorage.getItem('token');
    if (token) {
      setIsAuthenticated(true);
    }
  }, []);
  
  return isAuthenticated;
};

const ProtectedRoute = ({ children }) => {
  const isAuthenticated = useAuth();
  
  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }
  
  return children;
};

实现方案二：自定义组件方式

const PrivateRoute = ({ component: Component, ...rest }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  
  useEffect(() => {
    // 权限验证逻辑
    const checkAuth = async () => {
      try {
        const token = localStorage.getItem('token');
        if (token) {
          // 可以添加实际的权限验证API调用
          setIsAuthenticated(true);
        }
      } catch (error) {
        console.error('权限验证失败', error);
      }
    };
    
    checkAuth();
  }, []);
  
  return (
    <Route
      {...rest}
      element={isAuthenticated ? <Component /> : <Navigate to="/login" />}
    />
  );
};

路由配置示例

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