路由跳转后localStorage获取的token为空致请求401问题咨询

问题原因 #

核心问题出在axios请求头的初始化时机：

• 你的axios.js中设置默认请求头的代码是在项目启动时执行的，此时localStorage里还没有token，所以Authorization被设置为Bearer null。
• 登录成功后你将token存入localStorage，但axios的默认请求头已经初始化完成，不会自动更新。路由跳转到Home页面后，发起请求时使用的还是初始化时的旧请求头，因此出现401错误。
• 刷新页面时，项目重新初始化，此时localStorage中已有token，axios会读取到正确的值，请求自然恢复正常。

解决方案 #

不要在初始化时固定设置axios默认请求头，改用请求拦截器，每次发起请求前动态读取localStorage中的token：

// axios.js
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

这样每次请求都会实时获取最新的token，无论登录后跳转还是页面刷新，都能保证请求头中的token有效。

额外优化 #

可以在拦截器中处理token缺失的情况，比如自动跳转到登录页：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  } else {
    // 根据你的路由配置调整跳转路径
    window.location.href = '/login';
  }
  return config;
});

注意事项 #

• 确认登录接口返回的response.data确实是正确的token字符串，避免存入错误值导致后续请求失败。
• 若项目使用状态管理工具（如Vuex/Pinia），可以将token存入状态仓库，配合拦截器使用，状态管理会更规范，也能减少直接操作localStorage的潜在问题。

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