AWS Amplify - Как визуализировать компоненты после входа в систему - PullRequest
Новая
       60

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

2 голосов
/ 26 апреля 2020

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

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

1 Ответ

0 голосов
/ 26 апреля 2020

Мне удалось решить эту проблему, используя подсказки, приведенные в этом ответе 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>  
    );
}
...