Axios配置Auth Header最佳实践？JWT认证相关配置问题咨询

问题1处理方案 #

你当前的写法问题在于在Axios实例初始化时就写死了Authorization头，不仅登录请求会携带空的Bearer令牌触发后端异常，后续登录成功拿到新token后实例的header也不会自动更新。
最优方案是用Axios请求拦截器动态注入鉴权头，示例代码如下：

import Axios from 'axios'

export const axios = Axios.create({
  baseURL: "http://localhost:8080",
  headers: {
    "Content-Type": "application/json"
  },
});

// 请求拦截器
axios.interceptors.request.use(
  (config) => {
    // 排除登录接口，不携带鉴权头
    if (config.url !== '/login') { // 替换为你实际的登录接口路径
      const token = localStorage.getItem('token')
      if (token) {
        config.headers.Authorization = `Bearer ${token}`
      }
    }
    return config
  },
  (error) => Promise.reject(error)
)

临时应急也可以在调用登录接口时单独覆盖header：

axios.post('/login', loginForm, { headers: { Authorization: undefined } })

问题2 token读取方式 #

必须从localStorage中读取，不要直接填充全局变量。
全局变量存在两个致命问题：

• 页面刷新后变量会被重置为空，用户登录状态直接丢失
• 登录成功后你更新全局变量，已经初始化完成的Axios实例也不会同步更新header配置
  token是持久化存储在localStorage里的，每次请求前从localStorage读取即可保证拿到的是最新的有效token。

问题3 多套Axios配置合理性 #

这是完全合理的最佳实践。
不同业务场景的请求配置、拦截逻辑差异很大，拆分多实例维护远比在同一个实例里写大量判断逻辑更易维护，常见的拆分方式：

• 公开实例：对接登录、注册、首页公共数据等不需要鉴权的接口，不挂载鉴权逻辑
• 鉴权实例：对接需要登录的用户侧接口，挂载鉴权头注入、401状态码自动跳登录等逻辑
• 特殊实例：比如文件上传、对接第三方服务的请求，可以单独配置不同的baseURL、超时时间、响应处理规则，不会和通用逻辑冲突

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