我正在创建一个反应应用程序 - 使用 create-react-app 和 amplify - 我正在尝试设置身份验证。我似乎无法使用托管 UI 处理联合登录。
有些页面不需要身份验证即可访问，有些页面需要用户登录。我想使用托管 UI，因为它是预先构建的。我一直在关注这里的入门文档：https ://aws-amplify.github.io/docs/js/authentication
对于背景，我有以下组件： - Amplify - 一个放大客户端，它将调用包装在 doSignIn doSignOut 等方法中。我们的想法是将所有这些代码保留在一个地方。这是一个普通的 javascript 类 - Session - 提供身份验证上下文作为 React 上下文。此上下文是使用放大客户端设置的。它具有用于使用上下文的 HOC - 页面 - 一些包含在会话 HOC 中withAuthentication，仅在用户登录时才呈现页面
这个结构实际上取自 Firebase 教程： https: //www.robinwieruch.de/complete-firebase-authentication-react-tutorial/
也许这对于 Amplify 来说是不可行的？虽然对我来说看起来很相似，但它应该可以工作。基本思想是会话提供一个可以使用withAuthenticationHOC 订阅的单一身份验证上下文。这样，任何需要用户的组件都会在用户登录后立即呈现。
最初，我将整个 App 组件包装在withAuthenticatoramplify 提供的 HOC 中，如文档中所述。然而，这意味着未经身份验证就无法访问任何页面 - 主页需要无需帐户即可访问。
接下来，我尝试使用登录按钮调用托管 UI，然后处理响应。问题是，当托管 UI 登录用户后，它会重定向回应用程序，导致其重新加载 - 这对于单页应用程序来说并不理想。
然后，我尝试在每次应用程序启动时检查用户是否经过身份验证 - 以处理重定向 - 但这变得很混乱，因为我需要将大量放大客户端代码移动到会话上下文，以便它可以正确初始化。我能看到的唯一方法是使用 Hub 模块：https://aws-amplify.github.io/docs/js/hub#listening-authentication-events缺点是登录后，应用程序会刷新并您仍然有一个注销的时刻，这使得用户体验很奇怪。
我本以为会有一种方法不会导致应用程序刷新。也许对于托管 UI 来说这是不可能的。让我感到困惑的是文档没有在任何地方提到它。事实上，有关于处理来自托管 UI 的回调的文档，据我所知，这种情况永远不会发生，因为整个页面都会刷新，因此回调永远无法运行。 …