Axios默认令牌未设置

Question

使用axios，我尝试为所有请求设置默认标头身份验证令牌。但默认情况下它没有被发现，并且对于任何其他api调用，“授权”没有在标头中设置。

这是一个常用文件

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标头进行授权时，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;
    });