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

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

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

这取自https://aws-amplify.github.io/docs/js/authentication 所以在导航栏或任何你想创建退出按钮的地方，你可以添加：

  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”包装您的应用程序导出

所以 fx 在你的 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 尝试它，您将获得默认注销按钮。

在此之后，您可以随意设置按钮样式。希望这可以帮助！

Answer 2

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

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

顺便说一句，您不一定需要将SignOut按钮包裹在里面Authenticator。将其放在任何地方，然后根据Auth.currentAuthenticatedUser()结果显示/隐藏。