Question

我使用Axios创建了Vue应用。我通过Vue UI依赖项安装安装了Axios。在我的 main.js 文件中，添加了全局配置

import Vue from "vue";
import "./plugins/vuetify";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import axios from "axios";

Vue.config.productionTip = false;

axios.defaults.baseURL = "http://localhost:3000";
axios.defaults.headers.common["Authorization"] = `Bearer ${localStorage.token}`;
axios.defaults.headers.post["Content-Type"] = "application/json";

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

当我想signOut时执行此命令

signOut: async function() {
  try {
    const response = await axios.post("/users/signout");
    // go on
  } catch (err) {
    // err handling
  }
}

，但帖子标题返回未定义的标记Bearer undefined。所以我删除了这一行

axios.defaults.headers.common["Authorization"] = `Bearer ${localStorage.token}`;

从 main.js 文件中并使用了此代码

signOut: async function() {
  try {
    const request = axios.create({
      baseURL: "http://localhost:3000/users/signout"
    });
    request.defaults.headers.common['Authorization'] = `Bearer ${localStorage.token}`;
    const response = await request.post();
    // go on
  } catch (err) {
    // err handling
  }
}

，这很好。 Authorization标头已正确设置。为什么现在可以使用？如何解决第一种方法？

Answer 1

由于您在main.js中设置了授权标头，因此在应用启动时将执行一次。如果在您的localStorage中不存在该令牌，则它将为undefined，并将一直保持这种状态，直到请求拥有它自己的令牌为止。现在，在第二种方法中，您的令牌localStorage中出现了令牌，因此它将正确设置标头。

在第一种方法中，您可以通过删除Authorization标头分配并直接在请求中分配令牌来解决此问题，或者创建一个函数，只要服务器中的令牌发生更改（或删除）。

全局axios配置未定义承载令牌

1 个答案: