当前位置：首页 > React

react实现登录拦截

2026-01-27 02:59:13React

实现登录拦截的基本思路

在React中实现登录拦截通常涉及路由守卫和全局状态管理。核心逻辑是检查用户是否已登录，未登录时重定向到登录页面。

使用React Router实现路由拦截

安装必要依赖：

npm install react-router-dom

创建受保护的路由组件：

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

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

在路由配置中使用：

react实现登录拦截

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <BrowserRouter>
      <Routes>
        <Route element={<ProtectedRoute isAuthenticated={isLoggedIn} />}>
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/profile" element={<Profile />} />
        </Route>
        <Route path="/login" element={<Login onLogin={() => setIsLoggedIn(true)} />} />
      </Routes>
    </BrowserRouter>
  );
}

结合Context管理全局状态

创建认证上下文：

const AuthContext = createContext();

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

  const login = (userData) => {
    setUser(userData);
    localStorage.setItem('token', userData.token);
  };

  const logout = () => {
    setUser(null);
    localStorage.removeItem('token');
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

在应用顶层包裹Provider：

react实现登录拦截

ReactDOM.render(
  <AuthProvider>
    <App />
  </AuthProvider>,
  document.getElementById('root')
);

处理页面刷新后的状态持久化

在应用初始化时检查本地存储：

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(() => {
    const token = localStorage.getItem('token');
    return token ? { token } : null;
  });

  // ...其他逻辑
};

实现axios请求拦截

设置全局请求拦截器：

import axios from 'axios';

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // 处理token过期情况
      localStorage.removeItem('token');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

完整登录流程示例

登录组件实现：

function Login() {
  const { login } = useContext(AuthContext);
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('/api/login', { /* 登录数据 */ });
      login(res.data.user);
      navigate('/dashboard');
    } catch (error) {
      alert('登录失败');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 登录表单 */}
    </form>
  );
}

标签: react