AWS Amplify - 如何在登录后呈现组件

Question

我有一个使用 React 的 AWS Amplify 应用程序。我希望TaskList只有在用户成功登录时才能加载（或重新加载）组件。但是，当页面加载时以及用户填写表单并注册时，组件从一开始就呈现出来重新加载。我一直在尝试多种解决方法，但我看不到如何使我的组件依赖于成功登录。我依靠默认的 Amplify 身份验证器功能来让用户登录 Cognito。

const App = () => (
  <AmplifyAuthenticator>
    <div>
      My App
      <AmplifySignOut />
      <TaskList />
    </div>
  </AmplifyAuthenticator>
);

Answer 1

我设法使用此答案中给出的提示解决了它AWS Amplify: onStatusChange then render main page。

基本上，我更改了我的 App 组件以仅返回登录表单或基于身份验证状态更改的整体。

const App = () => {
    const [authState, setAuthState] = useState('');

    function handleAuthStateChange(state) {
        if (state === 'signedin' || state === 'signedout') {
            setAuthState(state);
        }
    }

    return (
      <div>
        { authState !== 'signedin' ?
        <AmplifyAuthenticator>
            <AmplifySignIn handleAuthStateChange={handleAuthStateChange} slot="sign-in"></AmplifySignIn>       
        </AmplifyAuthenticator> 
        :
        <div>
           My App
           <AmplifySignOut handleAuthStateChange={handleAuthStateChange} slot="sign-out"/>
           <TaskList />
        </div>
        } 
      </div>  
    );
}