无法在 Axios 拦截器中访问 Vuex 存储突变

Posted 2023-02-22

【中文标题】无法在 Axios 拦截器中访问 Vuex 存储突变

【英文标题】：Can't access Vuex storage mutation inside Axios interceptor

【发布时间】：2018-09-12 22:05:59

【问题描述】：

编辑：这个问题非常混乱，所以我基本上用相同的代码示例和相同的场景重写它。

---

当服务器发送 401 错误作为响应时，我试图将 .commit 从拦截器发送到我的 vuex 存储：

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

export default function execute() 
    axios.interceptors.request.use(function(config) 
        const token = store.state.token;
        if(token) 
            config.headers.Authorization = `Bearer $token`;
            //console.log(config);
            return config;
         else 
            return config;
        
    , function(err) 
        return Promise.reject(err);
    );
    axios.interceptors.response.use((response) => 
        return response;
    , (err) => 
        console.log(err.response.status);
        if(err.response.status === 401) 
            this.$store.commit('logout');
        
        console.log('err'); // this doesnt even console log
        return Promise.reject(err);
    );

但它会抛出错误

TypeError: 无法读取未定义的属性“$store”

在 eval (httpInterceptor.js?bdcd:22)

我不知道为什么我认为我正确地导入了它。

我使用箭头函数，我也尝试不使用箭头函数，但它会导致与上述相同的错误。

我在 main.js 中通过导入并调用 (import interceptor from './helpers/httpInterceptor.js'; interceptor();) 来执行我的拦截器

我的vuex存储文件是：

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex);

export const store = new Vuex.Store(
    state: 
        logged: false,
        token: ''
    ,
    mutations: 
        login: (state, response) => 
            if(response) 
                state.logged = true;
                state.token = response;
                console.log('state updated');
                console.log('state.logged flag is: '+state.logged);
                console.log('state.token: '+state.token);
            
        ,
        logout: (state) => 
            state.logged = false;
            state.token = '';
        
    ,
    plugins: [
        createPersistedState()
    ]
);

我将它分配给 Vue 实例

new Vue(
    el: '#app',
    router,
    store,
    template: '<app/>',
    components:  app 
);

为什么我不能在这个拦截器中使用我的突变，是什么导致了问题以及如何解决它？

【参考方案1】：

好的，我修好了。所以我做错的是我遵循了类似this.$store.... 的文档示例，当您在组件方法中使用它时很好。当我像变量一样导入它时

import store from '../store/store';

我应该改变

this.$store.commit('logout');

到

store.commit('logout');

现在它工作正常。

【讨论】：

请注意，如果您以模块格式使用商店，则必须导入商店本身（设置 Vuex 的地方）而不是商店模块文件。