Vue项目结合Laravel Passport登录后如何全局配置Axios的Authorization请求头

问题根因 #

你在main.js中配置的Axios全局头逻辑仅会在项目首次加载时执行一次：登录前localStorage中不存在access_token，因此初始化阶段不会给Axios设置Authorization头。登录成功后你仅将token存入localStorage和Vuex，没有同步更新Axios的全局默认头配置，因此跳转后的请求不会携带认证头，只有刷新页面重新执行main.js逻辑后才会生效。

方案1：最小改动适配 #

直接在Vuex的登录成功逻辑中同步更新Axios全局头，修改store中的loginaction即可：

login({ commit }, credentials) {
    return axios.post("http://127.0.0.1:8000/api/login", credentials).then(( res ) => {
        const token = res.data.data.token
        localStorage.setItem('access_token', token);
        // 新增：同步更新Axios全局认证头
        axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
        commit("setToken", res.data.data);
    });
}

方案2（更推荐）：全局请求拦截器统一处理 #

该方案不需要在多场景手动维护头配置，所有请求发出前会自动读取最新的token挂载，适配后续token刷新、多场景登录等需求：
替换main.js中原有的全局头配置代码，添加Axios请求拦截器：

// 删掉原有判断token设置全局头的代码，替换为如下拦截器逻辑
axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('access_token')
    if (token) {
      config.headers.Authorization = 'Bearer ' + token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

该方案的优势：

• 无需在登录、刷新token等场景手动修改Axios默认配置，拦截器每次请求都会自动读取最新的token
• 后续新增全局请求逻辑（如请求参数加密、公共参数挂载等）均可统一在拦截器中维护

补充优化 #

如果有退出登录逻辑，清除token时需要同步清除全局认证头，避免无效请求携带过期token：

// 退出登录逻辑中添加如下代码
localStorage.removeItem('access_token')
delete axios.defaults.headers.common['Authorization']
// 同步清空Vuex中的token、用户信息状态

内容的提问来源于stack exchange，提问作者Myo Paing Thu