在 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 });  
  }

SetAuthorizationToken.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

您不必跟踪 JWT 令牌或用户，也不必使用 cognito 自行刷新。

对于 axios 调用，只需在 axios 调用之前使用

await Auth.currentSession()

并将令牌直接从回调注入到 axios 调用中。

currentSession

只会返回有效的令牌，并且如果过期，将尝试刷新它。

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

您也不必保存用户，因为您可以通过

currentAuthenticatedUser

调用在任何需要的地方访问他。