공리를 부르는 곳.Vue.js 앱에서 사용되는 인터셉터.request.use?

공리를 부르는 곳.Vue.js 앱에서 사용되는 인터셉터.request.use?

나는 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? inApp.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: {
  ...

아래 코드와 같이 사용할 수 있지만 그렇게 하기 전에 다음 모듈을 설치해야 한다.

 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예시

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');

생성해야 함

참조URL: https://stackoverflow.com/questions/52701977/where-to-call-axios-interceptors-request-use-in-a-vue-js-app