Vue Cookies. get（'令牌'）返回空

Question

我的项目使用vuex、axios、vue cookies和JWTs。我有一个叫做api的文件。js导入到我的主vue js、api中。下面是js代码；

import axios from 'axios'
import Vue from 'vue'
import { store } from "@/store";

export default axios.create({
    baseURL: store.state.endpoints.baseUrl,
    headers: {
        Authorization: `JWT ${Vue.$cookies.get('token')}`,
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
})

当我通过登录页面登录时，一切都显示成功。在检查器中，cookie“令牌”值正确地用新令牌更新，Vuex更新以显示用户已认证，路由器将我重定向到主页。一旦在主页上，如果我试图导航到一个进行任何需要身份验证的调用的页面，在标题中它会传递“JWT空”而不是cookie中的令牌，并且失败，我最终会进入一个成功登录的永久循环，但是不能去任何地方。

如果我在做任何其他事情之前登录并刷新页面，那么一切都会按预期工作，JWT不再为空。看来，该api。这个问题顶部的js代码没有在每次调用cookie时正确地从cookie中提取令牌，而只是在页面刷新时，这是缓存的还是我需要在登录后以某种方式重新加载此导入？

作为参考，我的登录页面中的代码片段显示了登录后数据是如何更新的；

  api.post(this.$store.state.endpoints.obtainJWT, payload)
      .then((response) => {
        console.log("Token - "+response.data.token);
        console.log("Profile - "+response.data.user);
        this.$cookies.set('token', response.data.token);
        this.$store.commit("setAuthUser",
            {authUser: response.data, isAuthenticated: true})
      })
      .then(() => this.$router.push({path: '/'}))
      .catch((error) => {
        console.log("Error!");
        console.log(error);
        console.debug(error);
        console.dir(error);
      })

以及一个api调用的示例，如果在刷新页面之前访问，则该调用包含JWT null；

import api from "../api.js";
...
api.get("/data_full/" + id)
  .then((response) => {
    this.title = response.data.title;
  })

在我main.js项目中，api.js导入；

...
import api from './api.js'
...
Vue.$http = api;

Answer 1

在发布后阅读我的问题时，我意识到问题不是get（‘token’）调用，而是我正在创建一个Axios实例，在将令牌保存到cookie后，该实例显然没有被重新创建。

我现在已经将与授权头相关的代码移出api。js和进入主界面。js作为拦截器。这样，每次进行Axios调用时都会提取cookie中的令牌值。这解决了我的问题。更新了main中的代码。下面是js；

    ...
    api.interceptors.response.use(
        config => {
            const token = Vue.$cookies.get('token');
            if ( token != null ) {
                config.headers.Authorization = `JWT ${token}`;
            }
            return config
        },
    ...