在Vue.js应用程序中调用axios.interceptors.request.use的位置？

Question

我正在尝试在我的Vue.js应用程序中使用Amazon Cognito Vuex Module并使所有axios请求自动通过凭据并使用以下代码：

// Add authentication token to each request
axios.interceptors.request.use(async config => {
    const response = await store.dispatch('getUserSession');
if (response && response.accessToken && response.accessToken.jwtToken) {
    config.headers.AccessToken = response.accessToken.jwtToken;
}
    return config;
});

据我所知，这是一个应该为所有组件执行的通用代码，但是不清楚在哪里添加它。可能是App.vue或index.js？在App.vue我有：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuetify from 'vuetify';

    Vue.use(Vuetify);
    Vue.use(VueRouter);

export default new Vue({}).$mount('#app');

在index.js：

export default new Vuex.Store({
  state: {
  ...

Answer 1

您可以像在下面的代码中那样使用它，但在此之前您必须安装这些模块：

 npm i --save axios vue-axios vuex

代码：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuetify from 'vuetify';
import Vuex from 'vuex';
import axios from 'axios';
import VueAxios from 'vue-axios';
import store from './index'
Vue.use(Vuetify);
Vue.use(VueRouter);
Vue.use(Vuex);
Vue.use(VueAxios, axios);

export default new Vue({
 store,
  mounted(){
    axios.interceptors.request.use(async config => {
     const response = await store.dispatch('getUserSession');
       if (response && response.accessToken && response.accessToken.jwtToken) {
          config.headers.AccessToken = response.accessToken.jwtToken;
       }
    return config;
     });
  }
  }).$mount('#app');

在这里你调用store而不是$store因为变量在上面声明（import store from './index'）但在子组件中你必须使用this.$store而this关键字指的是Vue实例