Question

关注

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

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>
)

但是“退出”按钮仍然不可见

Answer 1

可能是因为SignOut按钮在App之外。它可能已呈现，但由于CSS布局而不可见。

请注意本教程中的SignOut按钮位于Navigator内部的App上。

顺便说一句，您不必将SignOut按钮包装在Authenticator内。将其放在任何位置，然后根据Auth.currentAuthenticatedUser()结果显示/隐藏。

Answer 2

这将不使用签出组件，而是注销的另一种方法。您将需要创建自己的签出按钮。

这取自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导出

所以f.x.在您的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进行尝试，则会显示“默认签出”按钮。

此后，您可以随意设置按钮的样式。希望这会有所帮助！

aws-放大-反应。身份验证器组件-退出按钮

2 个答案: