AWS Amplify - Как отображать компоненты после входа в систему

У меня есть приложение AWS Amplify, использующее React. Я хочу иметь возможность загружать (или перезагружать) компонент TaskList только тогда, когда пользователь успешно вошел в систему. Однако компонент отображается с самого начала, когда загружается страница и когда пользователь заполняет форму и регистрируется, он выиграл ' t перезагрузить. Я пробовал несколько обходных путей, но не вижу, как сделать так, чтобы мой компонент зависел от успешного входа в систему. Я полагаюсь на функции аутентификатора Amplify по умолчанию для входа пользователя в Cognito.

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

reactjs aws-amplify amplifyjs
person jbernal    schedule 26.04.2020    source источник
comment
См. Также github.com/aws-amplify/amplify-js/issues/5825 < / а>. Это может помочь   -  person joseprupi    schedule 21.05.2020

Ответы (2)


arrow_upward
5
arrow_downward

Мне удалось решить эту проблему, используя подсказки, приведенные в этом ответе AWS Amplify: onStatusChange, затем отобразите основной страница.

По сути, я изменил свой компонент приложения, чтобы он возвращал только форму входа или всю форму в зависимости от изменения состояния аутентификации.

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>  
    );
}
person jbernal    schedule 26.04.2020

arrow_upward
4
arrow_downward

Вот как я решил аналогичную проблему для управления состояниями. У меня были некоторые проблемы, так как он, похоже, не отправлял события впоследствии.

Из https://github.com/aws-amplify/amplify-js/issues/5825

import React from 'react';

import {  AmplifyAuthenticator, AmplifySignOut, AmplifySignUp, AmplifySignIn} from '@aws-amplify/ui-react';
import { onAuthUIStateChange } from '@aws-amplify/ui-components'


const Panel = () => {

    const [setAuthState] = React.useState();

    React.useEffect(() => {
        return onAuthUIStateChange(newAuthState => {
            if(newAuthState === 'signedin'){
                // Do your stuff
            }
            setAuthState(newAuthState)
        });
    }, []);


    return(
            <AmplifyAuthenticator>
                <AmplifySignIn headerText="Sign In" slot="sign-in"/>
                <AmplifySignUp slot="sign-up" formFields={[
                    {type: 'username'},
                    {type: 'email'},
                    {type: 'password'}
                ]}></AmplifySignUp>

                <AmplifySignOut></AmplifySignOut>
            </AmplifyAuthenticator>
    )

}

export default Panel;
person joseprupi    schedule 23.05.2020