Реакция автоматической перезагрузки импорта

#javascript #reactjs #dynamic #import

#javascript #reactjs #динамический #импорт

Вопрос:

В настоящее время я создал axios, общий для вызова API, как:

 export const API_LOCAL = axios.create({
    baseURL: process.env.REACT_APP_BASEURL,
    headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`,
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    timeout: 30000,
});
 

В первый раз, когда я начинаю импортировать и использовать файл с этим экспортом как API_LOCAL, я не использую «Авторизацию», localStorage.GetItem(‘token’) имеет значение null. Затем я получу некоторые данные и вернусь к localStorage.setItem(‘token’,’SOME_SAMPLE_TEXT’).

После этого, когда в другом вызове используется API_LOCAL, я думаю, что он кэшируется, потому что API_LOCAL с localStorage.GetItem(‘token’) всегда равен null.

Могу ли я настроить файл импорта динамической перезагрузки для получения последних данных? Спасибо за любые руководства.

Ответ №1:

лучший способ обработки токена на предъявителя — через перехватчик. Вы можете сделать что-то вроде

 axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if ( token != null ) {
    config.headers.Authorization = `Bearer ${token}`;
  }
}

 

Таким образом, каждый запрос axios будет отправляться с вашим токеном аутентификации