无法访问Axios拦截器中的Vuex存储突变 [英] Can't access Vuex storage mutation inside Axios interceptor

问题描述

这个问题非常混乱，因此我基本上使用相同的代码示例和相同的scenerio重写了它.

this question was very chaotic so I basically rewrite it with same code example and same scenerio.

当服务器发送401错误作为响应时，我正在尝试从拦截器.commit到我的vuex存储:

When 401 error is send in response from server I'm trying to .commit from interceptor to my vuex storage:

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'

TypeError: Cannot read property '$store' of undefined

评估时(httpInterceptor.js?bdcd:22)

at eval (httpInterceptor.js?bdcd:22)

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

I don't know why I think that I import it correctly.

我使用了箭头功能，我也尝试了不使用箭头功能，但是会导致与上述相同的错误.

I use arrow functions, I also tried without arrow functions but it cause same error as above.

我通过导入并调用(import interceptor from './helpers/httpInterceptor.js'; interceptor();)

我的vuex存储文件是:

My vuex storage file is:

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实例

and I'm assigning it to Vue instance

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

为什么我不能在此拦截器中使用我的突变，是什么引起问题以及如何解决该问题?

Why I can't use my mutation inside this interceptor, what is causing issue and how to fix it?

推荐答案

好的，我修复了它.所以我做错了，是按照文档示例进行操作，就像this.$store....一样，当您在组件方法中使用它时就可以了.当我像导入变量一样

Alright I fixed it. So what I did wrong is that I follow documentation examples where it was like this.$store.... and it's fine when you use it inside component methods. When I imported it like a variable

import { store } from '../store/store';

我应该改变

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

到

store.commit('logout');

现在工作正常.

这篇关于无法访问Axios拦截器中的Vuex存储突变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！