Как запустить механизм обновления токена с AX IOS в React? - PullRequest
Новая
       2

Как запустить механизм обновления токена с AX IOS в React?

0 голосов
/ 20 июня 2020

У меня есть приложение для реагирования с компонентом входа в систему. Я получаю токен доступа и токен refre sh при входе в систему и сохраняю их в локальном хранилище для использования. Через час (3600 секунд) токен доступа истечет, и всякий раз, когда я вызываю API, он возвращает код состояния ошибки 401 («Неавторизован»). Чтобы поймать этот случай и запустить функцию обновления токена доступа, я реализовал перехватчики Ax ios. Я настроил следующий код, чтобы перехватить ошибку 401 и заменить localStorage новым токеном, а также вспомнить предыдущий неудачный API.

Проблема в том, что даже после обновления локального хранилища предыдущий вызов API выполняется со старым токеном вместо нового и снова возвращает 401. Поэтому мне нужно перезагрузить страницу один раз, чтобы API успешно работал. Как я могу это исправить и мгновенно получать вызовы API?

Ax ios компонент: 

import axios from 'axios';
import AUTH from '../auth';
var accessToken = localStorage.getItem('accessToken');
var refreshToken = localStorage.getItem('refreshToken');

var api = axios.create({
    baseURL: `${process.env.REACT_APP_API}`,
    headers: {
        'Authorization': accessToken,
        'Content-Type': 'application/json',
        'Accept': 'application/json',
    }
});

var apiNoHeaders = axios.create({
    baseURL: `${process.env.REACT_APP_API}`
});

function getNewAccessToken(newRequest) {
    apiNoHeaders.post(`auth/refresh?refreshToken=${refreshToken}`)
        .then(res => {
            localStorage.setItem('accessToken', res.data.accesToken)
            localStorage.setItem('refreshToken', res.data.refreshToken)
            api.defaults.headers['Authorization'] = res.data.accesToken;
            newRequest._retry = true;
            return axios(newRequest)
        })
        .catch(error => {
            return Promise.reject(error);
        })
}

api.interceptors.response.use(
    response => response,
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    var newRequest = error.config;
                    getNewAccessToken(newRequest);
                    break;
                case 403:
                    AUTH.logout(() => {
                        window.location.replace("/loggedOut");
                    });
                default:
                    break;
            }
        }

        throw error;
    });

export default api;
...