#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 будет отправляться с вашим токеном аутентификации