登录后更新Vue中Axios基础实例的API Token

嘿，完全理解，刚上手第一个Vue项目遇到这类基础问题太正常啦，不用不好意思😉

你现在的核心问题是：Axios实例在初始化时就把当时localStorage里的token（登录前大概率是空值或旧值）塞进了Authorization头，登录后虽然新token存进了localStorage，但实例的请求头并没有自动同步更新。这里给你两种实用的解决思路：

方法一：直接更新Axios实例的默认headers #

这种方式简单直接，适合场景单一的情况。在登录成功拿到新token后，保存到localStorage的同时，手动修改API实例的默认请求头：

// 登录接口的成功回调逻辑
async function handleLogin() {
  const loginRes = await API.post('/login', { username, password });
  const newToken = loginRes.data.token;
  
  // 保存token到本地存储
  localStorage.setItem('api_token', newToken);
  // 直接更新Axios实例的Authorization头
  API.defaults.headers.Authorization = `Bearer ${newToken}`;
}

方法二：使用请求拦截器（更推荐） #

这是更健壮的长期方案——通过添加请求拦截器，让每次发起请求前自动从localStorage获取最新的token并注入请求头。不管是登录成功后，还是后续token过期刷新，都不用手动维护实例的headers，一劳永逸。

修改你的Axios实例代码如下：

import axios from 'axios'
import router from '@/router'

export const API = axios.create({
  baseURL: 'http://api-url.com',
  validateStatus: function (status) {
    if (status === 401) {
      router.push('/login');
    }
    // 注意：validateStatus需要返回布尔值，原代码return status是错误的
    // 这里表示仅接受200-299区间的状态码为成功响应，可根据业务需求调整
    return status >= 200 && status < 300;
  }
})

// 添加请求拦截器，每次请求前自动注入最新token
API.interceptors.request.use(
  function(config) {
    const latestToken = localStorage.getItem('api_token');
    if (latestToken) {
      config.headers.Authorization = `Bearer ${latestToken}`;
    }
    return config;
  },
  function(error) {
    // 请求出错时的处理逻辑
    return Promise.reject(error);
  }
);

额外小提醒：修正validateStatus的逻辑 #

你原来的validateStatus函数里return status是不符合要求的——这个函数需要返回布尔值，用来告知Axios该状态码是否应该被判定为成功响应。上面的代码已经帮你修正了这个问题，你可以根据自身业务场景调整判断规则。

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