Axios默认Authorization Token无法全局设置问题求助

可能的问题点 #

• Token格式不匹配后端要求
  绝大多数后端的Authorization请求头要求Bearer {token}格式，但你直接将res.token传入setAuthHeader，如果后端需要前缀，会导致请求头的Authorization值不合法，看起来像是未生效。

• 登录接口返回的Token路径错误
  看你的UseHttp函数，连续两次提取data：

  .then((response) => {
      if (response.status == 200) {
          return response.data;
      } else {
          throw new Error(response.data.message);
      }
  }).then((data) => {
      return data.data;
  })
  

  这意味着登录接口必须返回{data: {token: 'xxx', ...}}这种嵌套结构才能拿到Token。如果登录接口返回的是{token: 'xxx', ...}，res.token会是undefined，导致setAuthHeader设置空值，请求头自然没有Authorization字段。

• 请求执行顺序问题
  如果countryList在登录完成、Token设置前就被调用（比如组件挂载时直接执行，未判断登录状态），此时Token还未初始化，请求自然不带Authorization。

对应修复步骤 #

1. 修正Authorization格式

修改setAuthHeader函数，添加后端要求的前缀（通常是Bearer ，请确认后端文档）：

export const setAuthHeader = (token) => {
    axiosClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
}

2. 调整Token的获取逻辑

根据登录接口的实际返回结构修改UseHttp：
如果登录接口返回的是{token: 'xxx', message: 'success'}这种非嵌套结构，删掉UseHttp里多余的then：

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);
        }
    }).catch((error) => {
        return error.message;
    });
};

这样LoginApi里的res就能直接拿到登录接口返回的完整数据，res.token也能正确取值。

3. 确保请求在Token设置后执行

在调用countryList前先判断登录状态，比如：

import { countryList } from '../../../api/CountryApi';
import { getToken } from './Auth'; // 假设你有获取Token的工具函数

useEffect(() => {
    const token = getToken();
    if (token) {
        countryList().then((res) => {
            setallData(res)
        });
    }
}, [locale]) 

内容的提问来源于stack exchange，提问作者Ron