Я работаю над приложением реагирования, которое состоит из множества запросов API. Структура приложения

При входе в систему я получаю токен в ответ и сохраняю токен в своем локальном хранилище для использования в других запросах API.

Срок действия этого токена истекает каждые 30 минут, и если я делаю запрос API через 30 минут, я получаю статус 401 в моем запросе. Я использую этот статус 401 для выхода из системы и очистки данных токена в локальном хранилище.

Пример запроса

export function stationDailyUsage(data) { return dispatch ={amp}gt; { dispatch(dailyUsageLoading()); axios.get(`${API_URL}/Dashboard/DailyUsage?type=${data.type}{amp}amp;date=${data.date}`, { headers: { 'Authorization': `Bearer ${token}` }, }) .then(res ={amp}gt; { if (res.data.success === true) { dispatch(dailyUsageSuccess(res.data)); } else { console.log("error"); } }) .catch(function (error) { if(error.response.status === 401){ dispatch(logout()); } }); } } 

Таким образом, чтобы выйти таким образом, я должен выполнить эту проверку для каждого API, который я использую (около 40 API). Это лучший подход, чтобы следовать или есть лучший способ справиться с выходом из системы. Я читал об axios interceptors но не ясно, как реализовать это в моей системе. Любая помощь очень ценится.

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

Измените свою переменную здесь и используйте ее

  // Add a request interceptor axios.interceptors.request.use((config) ={amp}gt; { let token = localStorage.getItem("token"); if (token) { config.headers.credentials = 'include'; config.headers.Authorization = `Bearer ${token}`; config.headers['Access-Control-Allow-Origin'] = '*'; config.headers['Content-Type'] = 'application/json'; } return config; }, (error) ={amp}gt; { alert('interceptor request has error'); return Promise.reject(error); }); // Add a response interceptor axios.interceptors.response.use((response) ={amp}gt; { return response; }, (error) ={amp}gt; { if (error.response {amp}amp;{amp}amp; error.response.data {amp}amp;{amp}amp; error.response.data.error {amp}amp;{amp}amp; (error.response.data.session === false || error.response.data.session === "false")) { localStorage.removeItem("userId"); // {amp}lt;-- add your var window.location = "/"; // {amp}lt;-- add your path } else if (error.response {amp}amp;{amp}amp; error.response.data {amp}amp;{amp}amp; error.response.data.error {amp}amp;{amp}amp; error.response.data.error.message) { toastMessage(error.response.data.error.message, 1); } else if (error.response {amp}amp;{amp}amp; error.response.status === 401) { localStorage.removeItem("userId"); // {amp}lt;-- add your var window.location = "/"; // {amp}lt;-- add your path } else return Promise.reject(error); }); 
Бабак Ягхуби

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

Да, вы частично правы, если вы не можете использовать токены обновления (которые должны предоставляться для идеального поддержания состояния входа в систему).

Используйте перехватчики axios, чтобы перехватить ответ, прежде чем он станет ошибкой, подобной 401, которую необходимо обработать.

 axios.interceptors.response.use(function (response) { // 200 type responses, this should be left as it is return response; }, function (error) { // Handle your 401 error, maybe the UI changes and removing from local storage return Promise.reject(error); }); 

Вы можете написать свою собственную оболочку для axios и она должна выглядеть примерно так:

 import axios from 'axios'; const request = axios.create({ baseURL: backUrl, timeout: 5000, }); export const get = url ={amp}gt; { const expiresIn = localStorage.getItem('expiresIn'); const accessToken = localStorage.getItem('accessToken'); if (expiresIn {amp}amp;{amp}amp; Date.now() {amp}gt; expiresIn) { const refreshToken = localStorage.getItem('refreshToken'); request .post('/oauth/token', { grant_type: 'refresh_token', refresh_token: refreshToken, }) .then(res ={amp}gt; { store.dispatch( loginSubmitted( res.data.access_token, res.data.refresh_token, res.data.expires_in, ), ); localStorage.setItem('accessToken', res.data.access_token); localStorage.setItem('refreshToken', res.data.refresh_token); localStorage.setItem('expiresIn', res.data.expires_in); return request.get(url, { headers: { Authorization: `bearer ${res.data.access_token}` }, accessToken: res.data.access_token, }); }) .catch(err ={amp}gt; { localStorage.removeItem('accessToken'); localStorage.removeItem('refreshToken'); localStorage.removeItem('expiresIn'); }); } return request.get(url, { headers: { Authorization: `bearer ${accessToken}` }, accessToken, }); }; 

поэтому он будет проверять exprire_date перед каждым запросом и отправлять новый запрос на новый токен, чтобы пользователь не вышел из системы