AWS Amplify React UI 组件 - 如何调度身份验证状态更改事件？答案

【问题标题】：AWS Amplify React UI Component - How to dispatch auth state change event?AWS Amplify React UI 组件 - 如何调度身份验证状态更改事件？
【发布时间】：2020-05-15 15:12:23
【问题描述】：

我的应用程序使用 AWS Amplify React UI 组件 (@aws-amplify/ui-react) 来处理用户流，我需要知道用户何时成功登录。

我在下面添加了 handleAuthStateChange 道具。这可行，我可以接收新状态，但是它会阻止应用导航到其他 AmplifyAuthenticator 插槽，例如注册和忘记密码。

<AmplifySignIn
    slot="sign-in"
    handleAuthStateChange={(state, data) => {
        // handle state === 'signedin' but pass along other states
    }}
></AmplifySignIn>

有谁知道如何在不破坏其他 AmplifyAuthenticator 插槽的情况下获得有关身份验证状态更改的通知？

【问题讨论】：

标签： javascript aws-amplify

【解决方案1】：

您可以将其添加到 AmplifyAuthenticator 组件中。

<AmplifyAuthenticator 
    handleAuthStateChange={(state, data) => {
        console.log(state)
        console.log(data)
        //add your logic
    }}
>
    <AmplifySignIn
         slot="sign-in"
    >
    </AmplifySignIn>
</AmplifyAuthenticator>

或者您可以使用访问其他组件中的身份验证状态更改

import { onAuthUIStateChange } from '@aws-amplify/ui-components'

useEffect(() => {
    return onAuthUIStateChange((state, data) => {
        console.log(state);
        console.log(data);
        //add your logic
    });
}, []);

希望对你有帮助

【讨论】：