Axios请求拦截器仅在页面刷新后生效问题求助

你遇到的问题核心在于用户信息的获取时机：
你的代码里const user = storage.getObject('currentUser')是在axios模块加载时执行的，也就是页面初始化阶段。当用户登录成功后，currentUser被写入storage，但这个模块已经加载完成，这行代码不会再次执行，所以拦截器一直使用的是初始化时的空user值，自然不会添加Authorization请求头。只有刷新页面后，模块重新加载，才会读取到最新的用户信息。

把获取用户信息的逻辑移到请求拦截器的回调函数内部，每次发起请求时都重新读取最新的用户数据，这样就能保证拦截器总能拿到有效的token，无需刷新页面。

修改后的完整代码如下：

import axios from 'axios' 
import storage from '@/services/storageService' 

export const http = axios.create({ 
  baseURL: 'http://localhost/api', 
}) 

http.interceptors.request.use((config) => { 
  // 每次请求前都重新获取最新的用户信息
  const user = storage.getObject('currentUser')
  if(user){ 
    console.log(user) 
    config.headers.Authorization = user.token 
  } 
  return config 
}, (err) => { 
  console.log(err) 
  return Promise.reject(err) 
}) 

这种写法还有一个好处：如果后续有用户信息更新（比如token刷新、用户资料修改）的场景，拦截器也能自动获取到最新的数据，避免因为数据过期导致的请求授权失败问题。

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