react实现拦截器
React 拦截器实现方法
在 React 中实现拦截器通常用于拦截 HTTP 请求或路由跳转，以下是常见的实现方式：
Axios 请求拦截器
通过 Axios 的拦截器功能可以在请求发送前或响应返回后统一处理：
import axios from 'axios';
// 请求拦截器
axios.interceptors.request.use(
config => {
// 添加 token 等通用逻辑
config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
return config;
},
error => Promise.reject(error)
);
// 响应拦截器
axios.interceptors.response.use(
response => response.data,
error => {
if (error.response.status === 401) {
// 跳转登录页等处理
}
return Promise.reject(error);
}
);路由拦截器（React Router）
通过高阶组件或自定义路由组件实现路由跳转拦截：
import { Route, Redirect } from 'react-router-dom';
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route
{...rest}
render={props =>
localStorage.getItem('token') ? (
<Component {...props} />
) : (
<Redirect to="/login" />
)
}
/>
);自定义 Hook 拦截器
通过自定义 Hook 封装拦截逻辑：
import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
const useAuthInterceptor = () => {
const history = useHistory();
useEffect(() => {
const unlisten = history.listen((location) => {
if (!localStorage.getItem('token') && location.pathname !== '/login') {
history.push('/login');
}
});
return () => unlisten();
}, [history]);
};
// 在根组件调用
// useAuthInterceptor();注意事项
- 请求拦截器适用于全局 API 调用时的统一处理（如 token 注入）。
- 路由拦截器适合页面级权限控制。
- 对于函数组件，优先使用自定义 Hook 方案。
- 清除拦截器时需保存引用：
const myInterceptor = axios.interceptors.request.use(...); axios.interceptors.request.eject(myInterceptor);
