Vue.js 2. Как использовать Vuex в Axios Interceptor

Question

У меня есть перехватчик, в котором я хотел бы использовать Vuex геттеры, но при импорте моего 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' тоже не помогает.Я перепробовал почти все способы импорта, которые я знаю.Ничего не помогает.

Что мне не хватает?

Answer 1

Похоже, вы используете модули для пространства имен ваших геттеров.Чтобы определить, в чем проблема, почему бы не попробовать сделать это сначала без модулей, как в 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
    })
  }
}