Axios在JWT认证中无法动态刷新当前Token的问题咨询

问题背景 #

当前Axios配置如下：

import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:3000/api/v1'
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')

其中设置Authorization头的代码仅在初始化时执行一次，token变更后不会自动更新，导致切换用户时请求仍携带旧token：

• 登录用户1，获取并存储token后，请求正常携带用户1的token
• 切换登录用户2，新token已存入localStorage，但请求依然使用用户1的旧token

临时方案是在Vue组件脚本里手动调用setToken函数更新默认头，但这种写法不够优雅，希望找到更合理的解决方式。

可行解决方案 #

1. 使用Axios请求拦截器（推荐） #

利用Axios的请求拦截器，每次发送请求前从localStorage读取最新token并设置到请求头，彻底解决动态更新问题：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:3000/api/v1'
})

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 每次请求前获取最新的token
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  function (error) {
    // 处理请求错误
    return Promise.reject(error)
  }
)

export default instance

之后项目中所有请求都使用这个封装好的Axios实例，无需再手动维护token头。

2. 全局封装Token更新函数 #

把token更新逻辑放到Axios配置文件中，在登录/切换用户的全局逻辑里调用，避免在组件中重复写：

// axios.config.js
import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:3000/api/v1'

export function updateAuthToken() {
  const token = localStorage.getItem('token')
  if (token) {
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
  } else {
    delete axios.defaults.headers.common['Authorization']
  }
}

// 登录/切换用户的逻辑中调用
// 比如登录成功后：
localStorage.setItem('token', newToken)
updateAuthToken()

这种方式需要确保每次token变更后都调用updateAuthToken，适合需要手动控制更新时机的场景。

3. 动态获取Token的工具函数 #

如果不想用拦截器，也可以封装一个获取请求头的工具函数，每次请求时传入：

// auth.utils.js
export function getAuthHeaders() {
  const token = localStorage.getItem('token')
  return token ? { Authorization: `Bearer ${token}` } : {}
}

// 请求时使用
axios.get('/user', {
  headers: getAuthHeaders()
})

这种方式比较灵活，但需要在每个请求中手动传入headers，适合请求量不大的项目。

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