токен на предъявителя не определен с глобальной конфигурацией axios

Question

Я создал приложение Vue с помощью Axios.Я установил Axios через установку зависимостей Vue UI.В моем файле 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 и назначив токен в ваших запросах напрямую, или создайте функцию, которая будет назначать аутентификацию заголовка по умолчанию каждый раз, когда токен с сервера изменяется (или удаляется). .