使用全局 axios 配置未定义不记名令牌

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.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    const auth = token ? `Bearer ${token}` : '';
    config.headers.common['Authorization'] = auth;
    return config;
  },
  error => Promise.reject(error),
);

这样，在每个请求之前，我们的令牌将从 localStorage 中重新读取，并且更新后的 Bearer 令牌将在标头中设置。