AWS Amplify - компоненты React Authenticator не отображаются

Создание пользовательского интерфейса аутентификации с помощью https://aws-amplify.github.io/media/ui_library

import { Authenticator } from 'aws-amplify-react'
import Amplify from 'aws-amplify';

Amplify.configure(aws_exports);

const AppWithAuth = () => (
 <Authenticator />
)

https://aws-amplify.github.io/docs/js/authentication#using-the-authenticator-component-directly

Использование инструментов разработчика React для проверки, компоненты видны в React View

введите здесь описание изображения

Но не в представлении DOM браузера введите описание изображения здесь

Таким образом, различные компоненты Authenticator, такие как Greetings и SignIn, не отображаются в DOM. Как сделать их видимыми в браузере

[Состояние аутентификации и AuthData после входа в систему] 4

[Console.logs] 5


reactjs aws-amplify
person Shorn Jacob    schedule 05.11.2018    source источник
comment
Привет, Шорн Джейкоб! Вам удалось решить эту проблему?   -  person SaidAkh    schedule 29.12.2018

Ответы (2)


arrow_upward
2
arrow_downward

Компоненты визуализируют пользовательский интерфейс или ничего, основываясь на свойстве authState. В вашем случае authState это signedIn. Так что только Greetings может отображать некоторый UI.

person Richard Zhang    schedule 05.11.2018
comment
‹Authenticator› ‹Greetings /› ‹/Authenticator› не отображает пользовательский интерфейс приветствий, даже если authState подписан. - person Shorn Jacob; 06.11.2018
comment
Как насчет того, чтобы попробовать это. В вашем коде добавьте импорт Amplify, {Auth} из aws-ampify; импортировать aws_exports из './aws-exports'; Amplify.configure (aws_exports); Auth.signOut () Это необходимо для того, чтобы убедиться, что вы вышли из системы. Затем должна появиться форма входа. - person Richard Zhang; 06.11.2018
comment
Пробовал это. Это заставляет форму входа в систему. но после входа в систему приветствия не отображаются. - person Shorn Jacob; 07.11.2018
comment
Похоже, что в компонентах есть только authState, но нет authData, что может вызвать ошибку в Greetings. Вы проверяли журнал консоли? Есть ли журналы ошибок? - person Richard Zhang; 09.11.2018
comment
Я добавил скриншоты authData и console.log - person Shorn Jacob; 12.11.2018

arrow_upward
0
arrow_downward

различные компоненты Authenticator, такие как Greetings и SignIn, не отображаются в DOM.

Видя, что ваш authState в настоящее время находится на signedIn, вы буквально уже вошли в систему. Вот почему компонент <SignIn> не отображается / не отображается. Если вы хотите увидеть, как <SignIn> компонент работает, ваш authState должен быть в "signIn" значении, и вы можете попробовать жестко запрограммировать его как начальное состояние, чтобы увидеть его в действии.

import React from "react";
import { Authenticator } from "aws-amplify-react";
import Amplify from "aws-amplify";
import aws_exports from "./aws-exports";

Amplify.configure(aws_exports);

const AppWithAuth = () => (
  <Authenticator
    // Optionally hard-code an initial state
    authState="signIn"
  />
);

Что касается <Greetings>, он должен появиться, если ваше состояние signedIn. Вы также можете попробовать использовать withAuthenticator Компонент высшего порядка.

import React from "react";
import { withAuthenticator } from "aws-amplify-react";
import Amplify from "aws-amplify";
import aws_exports from "./aws-exports";

Amplify.configure(aws_exports);

const App = () => {
  return (
    <div>
      <h1>Hello world!</h1>
      <p>This is your own App Component</p>
    </div>
  );
};

export default withAuthenticator(App, {
  // Render a sign out button once logged in
  includeGreetings: true
});
person iomario    schedule 19.05.2020