Vue3项目中如何在组件与Store统一配置使用Axios并维护认证Token

要实现组件与Store共用同一配置的Axios，且登录后Token能同步到请求头，按以下步骤修改代码：

1. 改造Store中的Axios实例与Mutation #

修改store/index.js，导出配置好的api实例，并添加更新Token的Mutation：

import { createStore } from 'vuex'
import axios from 'axios';

// 导出api实例，供全局挂载使用
export const api = axios.create({
  baseURL: 'http://127.0.0.1:7000'
});

let user = localStorage.getItem('user');
if(null === user) {
  user = {uuid: '', token: ''};
} else {
  try {
    user = JSON.parse(user);
    api.defaults.headers.common['Authorization'] = 'Bearer ' + user.token;
  } catch (e) {
    user = {uuid: '', token: ''};
  }
}

export default createStore({
  state: {
    status: '',
    user: user,
    userInfos: {},
  },
  mutations: {
    // 添加更新用户信息的mutation
    SET_USER(state, user) {
      state.user = user;
      localStorage.setItem('user', JSON.stringify(user));
      // 同步更新Axios请求头
      if(user.token) {
        api.defaults.headers.common['Authorization'] = `Bearer ${user.token}`;
      } else {
        delete api.defaults.headers.common['Authorization'];
      }
    },
    // 其他现有mutation...
    [...]
  },
  getters: {
  },
  actions: {
    // 示例登录action，调用SET_USER mutation
    login({ commit }, credentials) {
      return api.post('/login', credentials)
        .then(res => {
          const user = {
            uuid: res.data.uuid,
            token: res.data.token
          };
          commit('SET_USER', user);
          return res;
        })
        .catch(err => {
          // 处理错误
          throw err;
        });
    },
    // 其他现有action...
    [...]
  },
  modules: {
  }
})

2. 全局挂载Axios实例到Vue应用 #

修改main.js，导入Store中导出的api实例，挂载到全局属性：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store, { api } from './store' // 导入api实例
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faMedal, faLaptopMedical, faCookieBite, faCoins, faHourglassStart, faUpRightFromSquare, faInfo, faGears } from '@fortawesome/free-solid-svg-icons'

library.add(
    faMedal,
    faCoins,
    faLaptopMedical,
    faCookieBite,
    faHourglassStart,
    faUpRightFromSquare,
    faInfo,
    faGears
);

const app = createApp(App)

app.component('font-awesome-icon', FontAwesomeIcon)
    .use(store)
    .use(router)
    // 将api挂载到全局，组件中可通过this.$api访问
    .config.globalProperties.$api = api
    .mount('#app')

3. 组件中使用全局Axios实例 #

在组件中按以下方式调用：

• Options API方式：

export default {
  methods: {
    fetchUserInfo() {
      this.$api.get('/user/info')
        .then(res => {
          // 处理返回数据
          console.log(res.data);
        })
        .catch(err => {
          // 处理错误
        });
    }
  }
}

• Composition API方式（setup中）：

import { getCurrentInstance } from 'vue';

export default {
  setup() {
    const { proxy } = getCurrentInstance();
    
    const fetchUserInfo = async () => {
      try {
        const res = await proxy.$api.get('/user/info');
        console.log(res.data);
      } catch (err) {
        // 处理错误
      }
    };
    
    return { fetchUserInfo };
  }
}

关键说明 #

• 导出api实例并全局挂载，确保组件和Store使用的是同一个Axios实例，配置完全一致。
• 在SET_USER mutation中同步更新Axios的请求头，保证登录后新Token立即生效，无需重新配置。
• 持久化用户信息到localStorage，刷新页面后会自动从本地读取并设置请求头，保持登录状态。

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