在 ReactJS 中使用 AWS Cognito 和 AXIOS 刷新令牌的最佳实践/方法

Question

我正在 App.JS 中执行以下操作，但它没有刷新其他组件中的令牌。有人可以建议在进行 AXIOS 调用之前检查令牌是否有效或从所有组件刷新它的最佳方法是什么。如果您可以提供任何示例的链接，那就太好了。谢谢你。

import { Auth } from "aws-amplify";
import setAuthorizationToken from './components/utility/SetAuthorizationToken';


async componentWillMount() {    
    try {            
       console.log("Im am in componentWillMount() in App.js");
       await Auth.currentSession().then(data => {
        this.setAuthStatus(true);
      }).catch(err => {
        this.setAuthStatus(false)
        });
      await Auth.currentAuthenticatedUser().then(user => {
        this.setUser(user);
        setAuthorizationToken(user.signInUserSession.idToken.jwtToken);
      });     
    } catch(error) {
      if (error !== 'No current user') {
        console.log(error);
      }
    }
    this.setState({ isAuthenticating: false });  
  }

设置授权令牌.js

import axios from 'axios';

export default function SetAuthorizationToken(token) {
    if(token){
        axios.defaults.headers.common['Authorization'] = token;       
    }else{
        delete axios.defaults.headers.common['Authorization'];
    }
}

Answer 1

H，欢迎来到 SO。

您不必跟踪 JWT 令牌或用户或使用 Cognito 自行刷新它。

对于 axios 调用，只需await Auth.currentSession()在 axios 调用之前使用，并将令牌直接从回调注入到 axios 调用中。currentSession只会返回一个有效的令牌，并会尝试刷新它，如果它已过期。

这样，您就可以依靠 AWS 始终为您提供有效的令牌，而无需自行跟踪。

您也不必保存用户，因为您可以通过currentAuthenticatedUser呼叫在任何需要的地方访问他。

希望这可以帮助。快乐编码。