我在成功登录后将令牌存储在 vuex 存储中，如下所示：

axios.post('/api/auth/doLogin.php', params, axiosConfig)
    .then(res => {
        console.log(res.data); // token
        this.$store.commit('login', res.data);
    })

axiosConfig 是一个文件，其中我仅设置了 baseURL export default { baseURL: 'http://localhost/obiezaca/v2' ，而 params 只是发送到后端的数据。

我的 vuex 文件如下所示：

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

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        logged: false,
        token: ''
    },
    mutations: {
        login: (state, 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 = '';
        }
    }
});

它工作正常，我可以根据 v-if="this.$store.state.logged" 为已登录用户重新渲染 SPA 中的部分内容。我可以从整个应用程序中的任何组件访问 this.$store.state.logged 。

现在我想将我的令牌添加到调用我的 rest API 后端的每个请求中。我已经创建了基本的 axios http 拦截器，如下所示：

import axios from 'axios';

axios.interceptors.request.use(function(config) {
    const token = this.$store.state.token;
    if(token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
}, function(err) {
    return Promise.reject(err);
});

现在我有两个问题/疑问。

1. 我知道可以在每个组件中使用 this.$store.state.logged 或 this.$store.state.token ，但我可以在单个 javascript 文件中以相同的方式使用它吗？
2. 我应该在哪里执行/启动我的拦截器 javascript 文件？它是独立的文件，位于我的应用程序主文件夹中，但我没有在任何地方调用它，在我之前使用的 angularJS 中，我必须在配置中添加 $httpProvider.interceptors.push('authInterceptorService'); ，但我不知道如何在 vue 架构中做同样的事情。那么我应该在哪里注入我的拦截器？

编辑

我按照 GMaiolo 提示添加了

import interceptor from './helpers/httpInterceptor.js';
interceptor();

到我的 main.js 文件，并将我的拦截器重构为：

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

export default function execute() {
    axios.interceptors.request.use(function(config) {
        const token = this.$store.state.token;
        if(token) {
            config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
    }, function(err) {
        return Promise.reject(err);
    });
}

此更改的结果是每个已经存在的后端调用（GET）不需要令牌即可工作，但这是合乎逻辑的，因为我没有明确说明应该将令牌添加到哪个请求，因此它试图将其添加到任何地方，而在我的拦截器中仍然出现问题，这就是为什么每个已经存在的请求都停止工作的原因。

当我尝试在浏览器控制台中执行后端 POST 调用时，仍然收到此错误：

TypeError: Cannot read property '$store' of undefined

虽然我将商店导入到我的拦截器文件中。有什么想法吗？如果需要，我可以提供更多信息。

我还添加了这个主、存储和拦截器树结构的屏幕截图，以便您可以看到我从正确的路径导入：