使用 React Native 和 Redux 刷新 OAuth 令牌

Question

我是React Native的新手，我遇到的第一个障碍是在访问令牌到期时刷新我的访问令牌。基本实现是这样的，有一个访问令牌和一个刷新令牌。访问令牌到期，刷新令牌在授权标头中发送以刷新访问令牌。基于这篇SO帖子，我实现了一个中间件，它在每次API调用期间检查我们的访问令牌是否即将到期。如果是这样，它会启动一个动作创建者，该动作创建者会调用API来刷新和确认新的访问令牌。我在这里只展示了刷新调用，以免事情过于复杂。

问题是，检测刷新需求的同一个中间件也会受到刷新调用本身的影响，这将导致无限循环，并最终超过调用堆栈大小。我想知道是否有人能帮我找出解决这个问题的方法，或者告诉我我很笨，并提供一个更好的整体解决方案。非常感谢任何指导。谢谢大家！

function auth({ dispatch, getState }) {
      return next => action => {
        if (typeof action === 'function') {
          // Check expiration of our token
          if (tokenIsExpired(getState)) {
            console.log('Our access token will expire in less than 30s, refreshing');
            // Make sure we are not already refreshing the access token
            if (!getState().core.refreshTokenIsLoading) {
              return next(dispatch(refreshAccessTokenFlow())).then(() => next(action));
            } else {
              // Take promise from state and act after it
              return getState().core.refreshAccessTokenFlow.then(() => next(action));
            }
          }
        }
        return next(action);
      }
    }

export function refreshAccessTokenFlow() {
  return (dispatch) => {
    return dispatch(refreshAccessToken())
      .then((didRefresh) => {
        console.log('refresh access token returned');
        return Promise.resolve();
      })
      .catch(error => {
        console.log('refresh access token failed: ' + error);
        return Promise.reject(error);
      });
  }
}

Answer 1

例如，您可以在需要访问令牌的操作中传递元数据，然后在中间件检查中传递，或者您需要根据元数据验证令牌。

操作文件

// My Team
export function fetchStuffWithOAuthStart(userId) {
  return {
    type: USER_FETCH_STUFF_WITHOUT_OAUTH_START,
    payload: { userId },
    meta: {
      oauth: true,
    }
};

中间件

function auth({ dispatch, getState }) {
      return next => action => {
        if (typeof action === 'function') {
          // Check here or you need to validate the token
          if (!action.meta || !action.meta.oauth) {
            return next(action);
          }

          // Check expiration of our token
          if (tokenIsExpired(getState)) {
            console.log('Our access token will expire in less than 30s, refreshing');
            // Make sure we are not already refreshing the access token
            if (!getState().core.refreshTokenIsLoading) {
              return next(dispatch(refreshAccessTokenFlow())).then(() => next(action));
            } else {
              // Take promise from state and act after it
              return getState().core.refreshAccessTokenFlow.then(() => next(action));
            }
          }
        }
        return next(action);
      }
    }

export function refreshAccessTokenFlow() {
  return (dispatch) => {
    return dispatch(refreshAccessToken())
      .then((didRefresh) => {
        console.log('refresh access token returned');
        return Promise.resolve();
      })
      .catch(error => {
        console.log('refresh access token failed: ' + error);
        return Promise.reject(error);
      });
  }
}