在不修改 Amplify 库的情况下访问错误响应答案

【问题标题】：Access the error response without modifying the Amplify library在不修改 Amplify 库的情况下访问错误响应
【发布时间】：2019-09-09 10:25:14
【问题描述】：

我正在使用 AWS Amplify 库来处理我的 React 应用程序的登录。这是通过将整个应用程序包装在一个 HOC 中来实现的，并且我已经为登录屏幕添加了自定义 UI。默认情况下，Amplify 在 toast 中显示来自 Cognito 的错误消息，但我想在我的自定义 UI 中将这些显示为纯文本。

我在 Amplify 存储库中提出了这个问题，并被告知无法自定义错误消息，但它目前是一个功能请求。同时，我认为必须有一个解决方法。

我相信有 3 种方法可以访问 React 中的错误消息：

当收到错误时，Amplify 将其设置为“Authenticator”状态，这是我的自定义 UI 的父组件（由 HOC 创建）。在不修改实际库的情况下，我无法将其作为道具传递或将其传递给 context/redux，但是否有一些黑客可以访问它？
对 Cognito 的请求由库生成的 fetch 请求处理，但我可以在控制台中看到响应。响应正文中带有错误消息的 400 响应。有没有办法设置某种事件侦听器来从 http 响应中获取错误消息？
当返回错误消息时，该库还会生成一个 toast。我目前正在向 HOC 传递一个 CSS 主题（显示：无）来隐藏它。有没有办法监听 toast 组件的创建并从位于内部的 span 元素中获取消息？

任何建议将不胜感激。

马修

【问题讨论】：

标签： javascript reactjs aws-amplify

【解决方案1】：

我找到了两种解决此问题的方法。

首先，如果您只对“signIn”、“signUp”或“signOut”事件感兴趣。您可以在尝试登录等身份验证操作之前使用“集线器”实用程序侦听“身份验证”事件，然后将错误消息设置为状态。像这样的：

import { Hub } from "aws-amplify";

handleLogin = e => {
  Hub.listen("auth", res => {
    const errorMsg = res.payload.data.message ? res.payload.data.message : null;
    this.setState(prevState => ({...prevState, errMsg: errorMsg}));
  })
  this.signIn(e);     
}

或者，如果您像我一样希望关闭确认登录或忘记密码事件的错误消息。您可以使用 Auth API 并捕获错误消息。您必须弄清楚需要将什么传递给每个方法，但文档信息量很大。以下是确认登录的示例：

import { Auth } from 'aws-amplify';

confrimSignIn = () => {
        Auth.confirmSignIn(this.props.authData, this.inputs.code, 'SMS_MFA')
        .then(() => this.changeState('signedIn'))
        .catch(err => this.setState({errMsg: err.message}));;
}

【讨论】：