可以使用高阶组件将 React 上下文传递到 axios 拦截器中。具体实现如下:
import React from 'react';
export const MyContext = React.createContext({});
import axios from 'axios';
import React from 'react';
import {MyContext} from './MyContext';
export const withAxiosInterceptor = (WrappedComponent) => {
return class extends React.Component {
componentDidMount() {
axios.interceptors.request.use((config) => {
const {myData} = this.context;
config.headers.common.Authorization = `Bearer ${myData.token}`;
return config;
});
}
componentWillUnmount() {
axios.interceptors.request.eject(this.interceptor);
}
render() {
return (
{(context) => (
)}
);
}
};
};
import React from 'react';
import {MyContext} from './MyContext';
import {withAxiosInterceptor} from './withAxiosInterceptor';
class MyComponent extends React.Component {
static contextType = MyContext;
render() {
const {myData} = this.context;
return {myData.username};
}
}
export default withAxiosInterceptor(MyComponent);
上一篇:Axios拦截器刷新了我其中一个请求的令牌,但其他请求返回401错误。
下一篇:Axios拦截器响应令牌刷新API被调用,但是无论在刷新令牌API中还是在后续的API中都得到了“令牌已过期”的消息。