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

Question

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

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

我相信可以通过 3 种方式访问​​ React 中的错误消息:

1. 当收到错误时，Amplify 将其设置为“Authenticator”状态，它是我的自定义 UI 的父组件(由 HOC 创建)。如果不修改实际的库，我无法将其作为 props 传递或将其传递到 context/redux 中，但是是否有一些 hack 可以访问它？

2. 对 Cognito 的请求是由库生成的提取请求处理的，但我可以在控制台中看到响应。 400 响应，响应正文中包含错误消息。有没有办法设置某种事件监听器来从 http 响应中获取错误消息？

3. 当返回错误消息时，库还会生成一个 toast。我目前正在向 HOC 传递一个 css 主题(显示:无)来隐藏它。有没有办法监听 toast 组件的创建并从内部的 span 元素获取消息？

如有任何建议，我们将不胜感激。

马修

Answer 1

我找到了两种方法来解决这个问题。

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

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