держать токен в курсе действия Axios

Question

Я хочу использовать Express REST API, для которого требуется действующий веб-токен json для некоторых маршрутов.В связи с тем, что мне приходится передавать токен из локального хранилища каждый раз, когда я хотел создать «файл конфигурации 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 возвращает неопределенное значение, поскольку оно не задано при создании экземпляра.

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

Answer 1

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

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

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

Answer 2

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

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