Vue3应用重新登录后axios请求仍携带旧Auth Token的问题咨询

你遇到的重新登录后请求还带旧token的问题，本质是两个具体的实现疏漏，和“模块导入固化配置”的关联很小：

• 登出逻辑只清理了localStorage里的token，没有同步清除之前存在axios全局内存配置里的旧Authorization请求头，旧值会一直残留
• 仓库工厂模式实现时，大概率在初始化仓库的axios实例时，就把当时拿到的token硬编码写进了实例头配置，后续就算localStorage里的token更新了，已经实例化的配置不会自动同步

1. 用请求拦截器动态注入最新token（一劳永逸） #

不要依赖axios.defaults.headers存全局token值，给axios加全局请求拦截器，每一次请求发出前，实时从localStorage读取最新的token拼到请求头里，从机制上杜绝旧值残留：

// 在axios全局初始化的位置配置拦截器
axios.interceptors.request.use((config) => {
  // 每次发请求都重新读存储里的最新值，不做内存缓存
  const currentToken = localStorage.getItem(AUTH_TOKEN_KEY)
  if (currentToken) {
    config.headers.Authorization = `Bearer ${currentToken}`
  }
  return config
})

这个方案不需要手动维护全局请求头的值：不管什么时候登出、重新登录，只要localStorage里的token更新了，下一次请求自动就会带上最新值，哪怕全局配置里残留了旧的头值，也会被拦截器动态覆盖。

2. 补全登出时的token清理逻辑 #

你现在的clearAuthToken逻辑太单薄，需要同步清理axios里的残留配置，避免下次请求带着无效的旧值：

export function clearAuthToken() {
  // 删除本地存储的token
  localStorage.removeItem(AUTH_TOKEN_KEY)
  // 同步清空axios全局默认头里的旧Authorization配置
  delete axios.defaults.headers.common['Authorization']
}

3. 排查仓库工厂的硬编码问题 #

检查RepositoryFactory的实现，不要在创建仓库axios实例的时候就把token写死进实例配置——这是仓库模式非常容易踩的坑：

// 典型的错误写法：实例创建时只读一次token，后续永远不会更新
const repoInstance = axios.create({
  baseURL: REST_ENDPOINT,
  headers: {
    // 这里读一次值就固化了，后续localStorage更新也不会变
    Authorization: `Bearer ${localStorage.getItem(AUTH_TOKEN_KEY)}`
  }
})

如果是这种写法，直接删掉实例创建时硬编码的头配置，给仓库用的axios实例也加上和上面一致的请求拦截器，保证每次请求动态获取最新token即可。

配好请求拦截器之后，你现在setAuthToken里手动给axios.defaults.headers.common.Authorization赋值的逻辑完全可以删掉——拦截器的动态注入逻辑已经会覆盖全局配置的值，多维护这部分全局赋值逻辑反而会增加配置不同步的风险。

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