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 /资源 200 / api / token / refresh

如前所述，我对此很陌生，我认为我应该更改代码以使用promises，但是我进行的每一次试用都没有用（由于我的新手代码，我必须承认）。任何帮助将不胜感激！

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();
  // [...]
}

反应-令牌刷新以错误的顺序执行

1 个答案: