Где вызвать axios.interceptors.request.use в приложении Vue.js?

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 instance