AWS-усиливать-реагировать. Компонент аутентификатора - кнопка выхода - PullRequest
Новая
       7

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

0 голосов
/ 01 ноября 2018

После

https://aws -amplify.github.io / документы / JS / аутентификации # с использованием-The-аутентификатор-компонентной непосредственно 

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


Amplify.configure(aws_exports);


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

export default AppWithAuth

Я пытаюсь использовать компонент Authenicator напрямую. Как отобразить кнопку выхода после входа в систему?

Пробовал следующее https://github.com/richardzcode/Journal-AWS-Amplify-Tutorial/tree/master/step-02#sign-out-button

import { Authenticator , SignOut} from 'aws-amplify-react'

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

Но кнопка выхода все еще не видна

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018

Это не будет использовать Компонент SignOut, но является альтернативным способом выхода из системы. Вам нужно будет создать свою собственную кнопку SignOut.

Это взято из https://aws -amplify.github.io / docs / js / authentication Таким образом, в Navbar или там, где вы хотите создать кнопку входа, вы можете добавить: 

  signOut = () => {
    Auth.signOut()
    .then(data => console.log(data))
    .catch(err => console.log(err));
  }

  // Then in your render method.
  <button onClick={this.signOut} className="signOutButton">SignOut</button>

Требуется, чтобы вы упаковали экспорт приложения с помощью «withAuthenticator»

т. Е. Х В вашем App.js 

import React, { Component } from "react";
import { withAuthenticator } from "aws-amplify-react";
class App extends Component {
     ...
}
export default withAuthenticator(App, false);

false здесь означает отсутствие кнопки sigOut. Если вы попробуете это с помощью true, вы получите кнопку SignOut по умолчанию.

После этого вы можете стилизовать кнопку так, как вам нравится. Надеюсь, это поможет!

0 голосов
/ 02 ноября 2018

Это может быть потому, что кнопка SignOut находится снаружи App. Возможно, он отображается, но просто не виден из-за разметки CSS.

Обратите внимание, что в учебнике кнопка SignOut находится на Navigator, которая находится внутри App.

Кстати, вам не обязательно оборачивать SignOut кнопку внутри Authenticator. Положите его где угодно, затем покажите / скройте базу на Auth.currentAuthenticatedUser() результате.

...