在Vue.js应用中的哪里调用axios.interceptors.request.use？

Question

我正在尝试Amazon Cognito Vuex Module在我的Vue.js应用中使用，并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实例