当前位置：首页 > React

react如何拦截是否登录

2026-01-24 22:52:32React

拦截登录状态的方法

在React中拦截登录状态通常涉及路由保护和全局状态管理。以下是几种常见的实现方式：

使用React Router进行路由拦截

通过高阶组件或自定义路由组件保护需要登录的页面：

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

全局状态管理（Redux/Context）

在应用顶层维护登录状态，通过Provider传递给子组件：

// 使用Context
const AuthContext = createContext();

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

  return (
    <AuthContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
      <Router>
        {/* 路由配置 */}
      </Router>
    </AuthContext.Provider>
  );
}

请求拦截（Axios）

在API请求层添加身份验证拦截器：

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) {
      // 跳转到登录页
    }
    return Promise.reject(error);
  }
);

本地存储验证

在应用初始化时检查本地存储的认证信息：

function useAuth() {
  const [auth, setAuth] = useState(() => {
    const token = localStorage.getItem('token');
    return { isAuthenticated: !!token };
  });

  const login = (token) => {
    localStorage.setItem('token', token);
    setAuth({ isAuthenticated: true });
  };

  return { auth, login };
}