我在用：
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
在用户登录应用程序后设置标题，但是当刷新页面时，此配置被删除。
当用户登录时，我想为来自 axios 的所有请求设置此配置。
我手动设置了这个配置，把这行代码放在导出 axios 实例之前。
现在，我需要在用户登录时设置此配置。我怎样才能做到这一点？
在 ReactJS 中导出后如何修改 axios 实例？
IT技术
reactjs
axios
2022-07-10 00:48:51
2个回答
您可能想要编写一个中间件module来获取/设置令牌localStorage并将其应用于您的 Axios 实例。过去我使用 Axios 时，通常是这样操作的：
import axios from 'axios';
import { API_URL } from '../constants/api';
const API = axios.create({
baseURL: `${API_URL}`,
timeout: 10000,
headers: {
'Content-Type': 'application/json',
},
});
API.interceptors.request.use(
config => {
const token = sessionStorage.getItem('jwt');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
} else {
delete API.defaults.headers.common.Authorization;
}
return config;
},
error => Promise.reject(error)
);
export default API;
您需要创建函数来获取/设置 JWT localStorage，但如果您这样做，这应该适合您。这将localStorage在发出每个请求之前从 JWT 中获取，因此只要用户在localStorage.
我遇到了与 Hiatt 描述的相同的问题：
刷新页面将使我以前的默认配置无效
虽然我不想在每次请求之前读取存储
，
所以我所做的是在请求之前检查并在必要时读取（例如：由于页面重新加载而重置默认值
// request interceptor function
function check_before_request(config) {
if (! config.headers.common['Authorization']) {
const token = Cookies.get('Authorization')
if (! token){
removeCookies()
location.href = `/login?redirect=${encodeURIComponent(location.pathname)}`
}
else {
setHeaderAuth(token, config)
}
return config
}
else return config
}
// also can be used in login page but without the second param
function setHeaderAuth(token, config) {
Cookies.set('Authorization', token)
axios.defaults.headers.common['Authorization'] = token;
if (config){
config.headers['Authorization'] = token
}
}