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

Question

我的应用程序使用 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 插槽的情况下获得有关身份验证状态更改的通知吗？

Answer 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
    });
}, []);

希望这有帮助