时间戳

首页 > 解决方案 > Vue.js 2. 如何在axios拦截器中使用Vuex

javascript - Vue.js 2. 如何在axios拦截器中使用Vuex

问题描述

我有一个拦截器，我想在其中使用Vuexgetter，但是，当我导入我的时候，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'也没有帮助。我已经尝试了几乎所有的导入方式，我知道。没有什么帮助。

我想念什么？

标签： javascriptvue.jsaxiosvuexes6-modules

解决方案

看起来您正在使用模块来命名您的吸气剂。为了找出问题所在，为什么不先尝试在没有模块的情况下执行此操作，例如在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
    })
  }
}

推荐阅读