Axios默认令牌未设置

Question

使用axios，我试图为所有请求设置默认的头验证令牌。但默认情况下，它不会出现，对于任何其他api调用，"授权"都不会在头中设置。

这是UseHttp.js，它是一个常见的文件

import axios from 'axios';
const axiosClient = axios.create({
headers: {
'Content-type': 'application/json',
'Accept': 'application/json',
}
});
const UseHttp = (requestConfig) => {
return axiosClient({
url: requestConfig.url,
method: requestConfig.method || 'GET',
data: requestConfig.body && JSON.stringify(requestConfig.body)
}).then((response) => {
if (response.status == 200) {
return response.data;
} else {
throw new Error(response.data.message);
}
}).then((data) => {
return data.data;
}).catch((error) => {
return error.message;
});
};
export const setAuthHeader = (header) => {

axiosClient.defaults.headers.common['Authorization'] = header;}
export default UseHttp;

登录后，我正在设置这样的标题

import {USER} from './Url';
import UseHttp, {setAuthHeader} from './UseHttp';
/* eslint-disable */
export const LoginApi = async (values) => {
const requestOptions = {
user_name: values.username,
password: values.password
}
try {
let res = await UseHttp({ url : USER.login, method:'POST', body: requestOptions});
setAuthHeader(res.token);
return res;
} catch (err) {
return err;
}
}

但是当我调用任何其他Api头时，那里没有设置Authorization其中CountryApi.js是

import UseHttp from './UseHttp';
import {LANDING} from './Url';

export const countryList = () => UseHttp({ url: LANDING.get_country_list });

Country.js是这个

import {countryList} from '../../../api/CountryApi';
useEffect(() => {
countryList().then((res) => {
setallData(res)

});
}, [locale]) 

Answer 1

这是如何在发送请求之前使用拦截器修改请求的基本实现，如果请求存储在本地存储中，则可以将令牌附加到标头。

import Axios from "axios";
const axios = Axios.create({
headers: {
'Content-type': 'application/json',
'Accept': 'application/json',
}
});

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

return config;
});