使用刷新的 JWT 令牌调用 API

Question

目前正在为我的 React 应用程序使用 AWS Cognito SDK。目前，在调用 API 时，我运行使用 ComponentWillMount

进行会话检查

componentWillMount() {
  if (!this.props.authenticated) {
    this.props.history.push('/auth/login');
  } else {
    getUserFromLocalStorage()
      .then(data => {
        console.log('getUserFromLocalStorage');
        this.props.setUserToReduxState(data);

        console.log(
          'user sucess retrieved from local storage and usersettoreduxstate: ',
          data
        )
        .then(console.log('after local test'))
      })

      .catch(() => {
        logoutUserFromReduxState();
      });
  }
}

在 componentDidMount 中，我使用来自本地存储的 JWT 令牌调用 API

componentDidMount() {
// calls API with localStage.jwtToken
this.loadData();
}

这在大多数情况下都有效，但是当令牌过期时，JWT 会被刷新，这一切都会得到处理，但是当最初调用 API 时，它会使用旧的 JWT 进行调用。我可以看到新的 JWT 在 redux 中被刷新，但它在 API get 被调用之前被刷新。

是否有任何建议可以确保在每次 API 调用之前，令牌在 API 调用之前在 redux 中刷新和更新？

Answer 1

这可能是由于 javascript 的异步性质。只需确保 this.lodaData() 等待令牌刷新即可。

例如，componentWillMount 运行身份验证部分，而 componentDidMount 在进行 API 调用之前不等待身份验证功能完成运行。

现在这不能通过将身份验证部分和 API 分开放在我的头上来完成，但是您可以将它们全部放在同一事件中，全部放在 componentWillMount 或 [=13 中=] 并确保在所有身份验证之后调用 API 调用。如下所示

refreshToken() {
    return new Promise((resolve, reject) => {
        //refresh token
        resolve()
    })
}

componentDidMount(){
    this.refreshToken().then(() => {
        //API call
    })
}

使用刷新的 JWT 令牌调用 API

Calling API with refreshed JWT token

jwt

reactjs

redux

react-redux

cognito