react实现登录路由拦截
路由拦截实现思路
在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的官方文档选择最适合项目架构的实现方式。
