Использование токена обновления OAuth2 в приложении React Redux

Question

У меня есть приложение, которое имеет OAuth2. Он отлично работает, но я смущен refresh_tokens здесь. Мое приложение использует React + Redux сочетание.

Я знаю, что мне нужно проверить, закончился ли мой access_token, а затем запросить новый, используя refresh_token. Хорошо ... Но когда я должен его обновить? После того, как 401 произошло или вовремя, когда какой-либо запрос API, который нуждается в авторизации, готов (непосредственно перед отправкой)?

Я также знаю, как использовать перехватчики HTTP, чтобы получить все API запросов перед отправкой или обнаружением ответов 401. Проблема в том, что я смущен, как решить проблему в потоке Redux. Как «заморозить» запрос на время обновления токена? Или как повторить запрос, когда я решаю проблему на ответ 401?

Answer 1

При первой аутентификации с сервером у нас будет {access_token, expires_in, refresh_token}. Мы будем хранить access_token и expires_in в session storage и refresh_token в локальном хранилище.

Всякий раз, когда вы получаете access_token для получения данных (вы должны усилить/завернуть выборку с заполнением access_token), вы проверите, скоро ли истечет срок действия expires_in (менее 1 минуты или то, что вам удобно), затем мы используем refresh_token запросить новый access_token. И, конечно же, мы должны обновить новый результат и на хранилище.

псевдокод:

function getToken() { 
    const expiresIn = storage.getItem(KEY_EXPIRES_IN); 
    const accessToken = storage.getItem(KEY_ACCESS_TOKEN); 
    if (accessToken 
     && (!expiresIn || moment.unix(Number(expiresIn)).diff(moment(), 'minute') > 1)) { 
     return accessToken; 
    } 
    return refreshToken(); 
} 

Над функции будет вызываться каждый раз, когда вы делаете запрос на сервер.

P/S: Вы можете сделать это как обещание использовать с изоморфными-выборки