Блог

Я создал приложение Vue с использованием Axios. Я установил Axios через установку зависимостей пользовательского интерфейса Vue. В моем 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
  }
}
  

но заголовки post возвращают неопределенный токен 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 Заголовок настроен правильно. Почему это работает сейчас? Как я могу исправить первый подход?

Поскольку вы устанавливаете заголовок авторизации в своем 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, а обновленный токен на предъявителя будет установлен в заголовке.