当前位置：首页 > React

react实现登录路由拦截

2026-01-27 09:35:14React

路由拦截实现思路

在React中实现登录路由拦截的核心逻辑是：检查用户是否已认证，未认证则重定向到登录页。React Router v6提供了Navigate组件和自定义路由守卫的灵活方案。

使用高阶组件封装

创建PrivateRoute高阶组件包裹需要保护的路由：

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

const PrivateRoute = ({ isAuthenticated }) => {
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;
};

// 使用示例
<Routes>
  <Route element={<PrivateRoute isAuthenticated={auth} />}>
    <Route path="/dashboard" element={<Dashboard />} />
  </Route>
</Routes>

路由配置拦截方案

在路由配置中直接进行条件判断：

<Routes>
  <Route 
    path="/profile" 
    element={isLoggedIn ? <Profile /> : <Navigate to="/login" state={{ from: location }} />} 
  />
</Routes>

全局路由守卫

在根组件或布局组件中统一处理：

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

  useEffect(() => {
    if (!isAuth && !['/login', '/register'].includes(location.pathname)) {
      navigate('/login', { state: { from: location } });
    }
  }, [location]);
}

状态管理集成

结合Redux或Context管理认证状态：

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const value = {
    user,
    login: (userData) => setUser(userData),
    logout: () => setUser(null)
  };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};

路由跳转拦截

处理登录后跳转回原页面的逻辑：

const Login = () => {
  const location = useLocation();
  const from = location.state?.from?.pathname || '/';

  const handleLogin = () => {
    login().then(() => {
      navigate(from, { replace: true });
    });
  };
}

路由加载状态处理

添加加载状态避免闪烁：

const PrivateRoute = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    checkAuth().finally(() => setLoading(false));
  }, []);

  if (loading) return <LoadingSpinner />;
  return auth ? <Outlet /> : <Navigate to="/login" />;
};

以上方案可根据具体需求组合使用，建议结合React Router的官方文档选择最适合项目架构的实现方式。

react实现登录路由拦截