无法在 Axios 拦截器中获取 Vuex 存储

Posted 2023-02-16

【中文标题】无法在 Axios 拦截器中获取 Vuex 存储

【英文标题】：Can't get Vuex storage inside Axios interceptor

【发布时间】：2021-10-03 23:27:04

【问题描述】：

访问 Vuex 存储时 Axios 初始化错误

import stores from '../stores';

const axios = require('axios');
const  message  = require('ant-design-vue');
const  MARKET_PLACE_API  = require('../../config');

const config = 
  baseURL: `$MARKET_PLACE_API/api/v1`,
  timeout: 30000,
;

const marketPlateAPI = axios.create(config);

marketPlateAPI.interceptors.response.use(
  (response) => 
    return response;
  ,
  async (error) => 
    if (error.code === 'ECONNABORTED') message.error('Timeout Request!');
    if (error.response && error.response.data.code === '002') 
      message.error('Unauthorized!');
      console.log('stores: ', store);
      await stores.dispatch('auth/logout');
    

    return Promise.reject(error);
  ,
);

export default  marketPlateAPI ;

我不知道为什么我认为正确导入它

我的vue存储文件：

import Vue from 'vue';
import Vuex from 'vuex';
import authStores from './auth.stores';
import appStores from './app.stores';
import uploadMainStores from './uploadMain';
import orderStores from './order.stores';
import supplierStore from './supplier.stores';

Vue.use(Vuex);

const store = new Vuex.Store(
  modules: 
    auth: authStores,
    app: appStores,
    uploadMain: uploadMainStores,
    order: orderStores,
    supplier: supplierStore,
  ,
);

export default store;

并且 authStore 有注销操作：

  actions: 
    ...
    async logout( commit, state ) 
      clearTimeout(state.timeoutID);
      await commit('deleteToken', );
      await router.push( name: 'SignIn' );
    ,
   

我正在分配给 Vue 实例

new Vue(
  router,
  store,
  i18n,
  render: (h) => h(App),
).$mount('#app');

为什么我不能在这个拦截器中使用我的突变，是什么导致了问题以及如何解决它？

【参考方案1】：

我建议你全局导入 Axios：

// app.js
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.withCredentials = true;

【讨论】：

感谢您的建议，我已尝试通过多种方式导入 Axios globbaly，但我的错误无法修复。