我创建了 axios 拦截器，它负责在每个请求发送到我的 rest API 之前添加令牌。

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 {
            console.log('There is not token yet...');
            return config;
        }
    }, function(err) {
        return Promise.reject(err);
    });
}

正如您在第 2 行看到的，我正在导入 vuex 存储，这实际上是存放我的令牌的地方。在第 8 行中，我实际上将此令牌添加到 config 对象，然后在下一行中对其进行了控制台处理。

它在我的 main.js 文件中执行，如下所示：

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

令牌存在于控制台中看到的配置对象中（因为我控制台了 config 对象）：

每次我按预期向 rest API 发出请求时，它都会运行。如果令牌存在（登录后），它应该将令牌标头添加到每个请求中。不幸的是，虽然它存在于配置对象中，但它并没有添加它，这让我有点困惑。

正如我在网络选项卡中看到的那样，它实际上并没有将令牌添加到实际请求中：

这个截图当然是在登录后拍摄的，所以令牌已经在 vuex 存储中，并且在我执行注销函数（调用 rest API）后，它控制台输出配置（拦截器的一部分）。

结果，因为我没有发送令牌，所以我的 rest API 响应了 400（错误请求）状态。

编辑！！！

我在想我可以添加什么来使它变得更好。我认为创建演示插件是不可能的，所以我决定创建一个小的 存储库 演示，您可以下载并亲眼看看问题。我希望它能帮助解决问题！