在 Vue.js 应用程序中在哪里调用 axios.interceptors.request.use？答案

【问题标题】：Where to call axios.interceptors.request.use in a Vue.js app?在 Vue.js 应用程序中在哪里调用 axios.interceptors.request.use？
【发布时间】：2019-03-13 02:34:51
【问题描述】：

我正在尝试在我的 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: {
  ...

【问题讨论】：

标签： javascript vue.js axios vuetify.js vuex

【解决方案1】：

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,
  created(){
    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');

应该使用created

【讨论】：

【解决方案2】：

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

 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实例

【讨论】：