React - обновление токена выполняется в неправильном порядке

Question

Я довольно новичок в React и помогаю решить проблему в нашем проекте с React. Токен JWT истекает до выполнения некоторых действий, и нам нужно обновить его с помощью токена обновления JWT, прежде чем выполнить «последний» вызов, который мы собирались выполнить первоначально.

Код будет похож на этот:

 mainFunction() {
    [...]
    if (!userTokenIsValid) {
       updateUserToken();
    }
    executeWhateverNeedsPermission();
    [...]
 }

 function userTokenIsValid() {
   if (!localStorage.userToken) return null;
   return (jwt.decode(localStorage.userToken).expiry > 30);
 }

 function getNewUserToken() {
   if (!localStorage.userToken) return null;
    return rp({
        uri: API_URL + "/token/refresh",
        method: 'POST',
        headers: {
            Authorization: localStorage.refreshToken
        },
        json: true
    }).then((data) => {
        if (!data || !data.userToken) {
            localStorage.removeItem('userToken')
        } else {
            localStorage.setItem('userToken', data.token);
        }
    }).catch((error) => {
        console.log("Something went wrong: " + error);
        throw error;
    });
 }

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

Но в тех случаях, когда срок действия токена истек, я вижу следующий порядок:

401 / admin / resources 200 / API / токен / обновление

Как уже говорилось, я довольно новичок в этом, я думаю, что я должен изменить код, чтобы использовать обещания, но каждое испытание, которое я дал, не работало (из-за моего кода новичка, я должен признать). Любая помощь будет высоко ценится!

Answer 1

Я предполагаю, что вы звоните getNewUserToken внутри updateUserToken. С этим кодом будет вызываться executeWhateverNeedsPermission до выполнения обещания, созданного rp. Поэтому вам нужно позвонить executeWhateverNeedsPermission, когда обещание будет выполнено. Вы можете сделать что-то вроде этого:

function mainFunction() {
  // [...]
  if (!userTokenIsValid()) {
    updateUserToken().then(() => executeWhateverNeedsPermission());
  } else {
    executeWhateverNeedsPermission();
  }
  // [...]
}

Или немного улучшить код с помощью async / await:

async function mainFunction() {
  // [...]
  if (!userTokenIsValid()) {
    await updateUserToken();
  }
  executeWhateverNeedsPermission();
  // [...]
}