Question

我有一个身份验证器文件，该文件基于状态呈现不同的组件。问题是以下代码不起作用。我需要让代码等待组件检查条件是否为条件。因此，基本上，它应该等待这种情况进行评估

isSignedIn() === true

并根据此条件做出相应的决定。任何帮助表示赞赏。

import Auth from '@aws-amplify/auth'

export default class Authenticator extends Component {
  isSignedIn = async () => {
    let isUserAuthenticated
    try {
      const userSession = await Auth.currentSession()
      if(userSession.idToken != null) {
        isUserAuthenticated = true
      } 
    }
    catch (error) {
      isUserAuthenticated = false
    }
    return isUserAuthenticated
  }

  render() {
    if(isSignedIn() === true) {
      return null
    }
    else {
      return <SignIn/>
    }
  }
}

问题是，尽管我使用了异步功能，但它开始呈现登录页面。

Answer 1

async函数将始终返回promise，因此您不能以同步方式使用它返回的内容。

您可以改为检查用户是否在componentDidMount中进行了身份验证，并将结果放入组件的状态并将其用于呈现。

示例

import Auth from "@aws-amplify/auth";

export default class Authenticator extends Component {
  state = {
    signedIn: null
  };

  componentDidMount() {
    this.checkUserStatus();
  }

  checkUserStatus = async () => {
    try {
      const userSession = await Auth.currentSession();
      if (userSession.idToken != null) {
        this.setState({ signedIn: true });
      }
    } catch (error) {
      this.setState({ signedIn: false });
    }
  };

  render() {
    const { signedIn } = this.state;

    if (signedIn === null || signedIn) {
      return null;
    } else {
      return <SignIn />;
    }
  }
}

异步调用未评估条件

1 个答案: