Блог

Я хочу использовать экспресс-REST API, для которого требуется действительный веб-токен json для некоторых маршрутов. Из-за того, что мне приходится передавать токен из localstorage каждый раз, когда я хотел создать «файл конфигурации Axios».

Мой файл http.js содержит следующий код

 import Vue from "vue";
import axios from "axios";

const devInstance = createInstance("http://localhost:3000");

devInstance.interceptors.request.use(config => {
    console.log(config);
    return config;
}, err => {
    console.log(err);
    return Promise.reject(err);
});

devInstance.interceptors.response.use(res => {
    console.log(res);
    return res;
}, err => {
    console.log(err);
    return Promise.reject(err);
});

const productionInstance = createInstance("http://www.myApi.com");

function createInstance(baseURL){
    return axios.create({
        baseURL,
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.token}`
        }
    });
}

Vue.prototype.$http = devInstance; // Check debug/build mode
  

в моем main.js Я импортирую этот экземпляр один раз

 import http from "./http.js";
  

и с этого момента я могу использовать this.$http для получения глобального экземпляра axios без его импорта.

При использовании API localStorage.token возвращается значение undefined, поскольку оно не задано при создании экземпляра.

Как я могу обновлять этот Authorization атрибут, не передавая токен каждый раз вручную?

Я думаю, вам следует написать перехватчик запросов, который добавляет Authorization заголовок ко всем запросам.

 devInstance.interceptors.request.use((config) => {
    config.headers.Authorization = `Bearer ${localStorage.token}`;
    return config;
}, (error) => Promise.reject(error));
  

Таким образом, вы всегда будете получать сохраненный в данный момент токен.

Вы должны создать таймер и асинхронное обновление для этого поля авторизации. Либо отдельный компонент, который обрабатывает это, либо таймер и асинхронный метод в этом компоненте (хотя не уверен, что вы можете сделать это с помощью Vue).

Надеюсь, это поможет. Приветствия