时间戳

首页 > 解决方案 > aws-放大反应。身份验证器组件 - 注销按钮

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

问题描述

下列的

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

但是注销按钮仍然不可见

标签： reactjsamazon-web-servicesaws-amplify

解决方案

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

这取自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”包装您的 App 导出

所以 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 尝试它，您将获得 Default signOut 按钮。

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

推荐阅读