当前位置：首页 > React

路由守卫react怎么实现

2026-01-27 17:44:45React

路由守卫的实现方法

在React中实现路由守卫通常需要借助react-router-dom库，通过自定义组件或高阶组件（HOC）来控制路由的访问权限。以下是几种常见的实现方式：

使用高阶组件（HOC）封装路由守卫

通过高阶组件包装需要保护的路由组件，在组件渲染前进行权限检查。

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

function withAuth(Component) {
  return function ProtectedRoute(props) {
    const isAuthenticated = checkAuth(); // 自定义权限检查逻辑
    return isAuthenticated ? <Component {...props} /> : <Navigate to="/login" />;
  };
}

使用时将受保护的路由组件传入高阶组件：

路由守卫react怎么实现

const ProtectedHome = withAuth(Home);
<Route path="/home" element={<ProtectedHome />} />

直接在路由配置中定义守卫

在react-router-dom v6中，可以通过element属性直接嵌入守卫逻辑。

<Route
  path="/dashboard"
  element={
    <RequireAuth>
      <Dashboard />
    </RequireAuth>
  }
/>

RequireAuth组件的实现示例：

路由守卫react怎么实现

function RequireAuth({ children }) {
  const location = useLocation();
  const isAuth = checkAuth();
  return isAuth ? children : <Navigate to="/login" state={{ from: location }} />;
}

全局路由守卫

通过自定义Router组件或监听路由变化实现全局控制。

import { useRoutes, useNavigate, useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    if (!checkAuth() && !location.pathname.startsWith('/login')) {
      navigate('/login');
    }
  }, [location]);

  return useRoutes(routesConfig);
}

嵌套路由守卫

对于嵌套路由，可以在父路由中统一处理权限。

<Route path="/admin" element={<AdminLayout />}>
  <Route index element={<RequireAuth><AdminDashboard /></RequireAuth>} />
  <Route path="users" element={<RequireAuth><UserList /></RequireAuth>} />
</Route>

路由守卫的进阶用法

结合Redux或Context实现动态权限控制：

function AuthWrapper({ children, requiredRole }) {
  const { user } = useContext(AuthContext);
  return user.role === requiredRole ? children : <Navigate to="/forbidden" />;
}