Vue.js 2.Axios 인터셉터에서 Vuex를 사용하는 방법

Vue.js 2.Axios 인터셉터에서 Vuex를 사용하는 방법

요격기를 가지고 있는데 그걸 이용해서Vuexgetters, 단, Import할 때store나는 받는다undefined.

여기 제 것이 있습니다.src/plugins/http.js코드:

import Vue from 'vue'
import store from '../store'
import axios from 'axios'


axios.interceptors.request.use(
    (config) => {
        if (store.getters['auth/hasAccessToken']) {
            config.headers['Authorization'] = 'Bearer ' + store.getters['auth/accessToken']
        }
    }
);

여기 제 것이 있습니다.src/store/index.js코드:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    //...
});

import store from '../store'도움도 안 돼요수입하는 방법은 거의 다 해봤어요.아무것도 도움이 안 돼요.

내가 뭘 놓쳤지?

모듈을 사용하여 getter의 네임스페이스를 만드는 것 같습니다.문제가 있는 곳을 특정하기 위해 먼저 모듈을 사용하지 않고 실행해 보는 것은 어떨까요?store.getters.hasAccessToken그리고....accessToken정상적으로 동작할 경우 모듈이 올바르게 설정되어 있을 가능성이 있습니다.구체적으로는 놓쳤을 가능성이 있습니다.namespaced: true를 참조해 주세요.참조: https://vuex.vuejs.org/modules.html

인터셉터 내의 설정 오브젝트도 반환하는 것을 잊지 마십시오.

중요한 건 비슷한 걸 쓰는데 모듈 없이도 잘 작동해요.다음과 같습니다.

import axios from 'axios'
import store from '../store'

export default class BaseDataService {
  constructor () {
    this.http = axios.create({baseURL: '/api/'})

    this.http.interceptors.request.use(config => {
      config.headers.Authorization = 'Bearer ' + store.state.principal.token
      return config
    })
  }
}

언급URL : https://stackoverflow.com/questions/50475431/vue-js-2-how-to-use-vuex-in-axios-interceptor