reactjs - 在 ReactJS 中使用 AWS Cognito 和 AXIOS 刷新 token 的最佳实践/方法

Question

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

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

H，欢迎来到 SO。

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

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

这样一来，您就可以依靠 AWS 始终为您提供有效的 token ，而无需您自己进行跟踪。

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

希望这对您有所帮助。快乐编码。