如何在 localStorage ReactJS 中设置 aws 放大数据答案

【问题标题】：How to set aws amplify data in localStorage ReactJS如何在 localStorage ReactJS 中设置 aws 放大数据
【发布时间】：2019-07-16 18:33:41
【问题描述】：

我正在制作由 AWS Amplify 框架提供支持的 ReactJS 应用程序。

我想制作自定义注册组件。一切正常，除了我的 localStorage 是空的。

当我使用“withAuthenticator”身份验证方法时，localStorage 充满了对应用程序运行很重要的数据，现在它是空的。

我的问题是：如何强制 aws 放大身份验证将身份验证数据放入本地存储，就像它在“withAuthenticator”方法中所做的那样。

我包含我的注册功能的代码。

Auth.signUp({
    username,
    password,
    attributes: {
        email,          
        phone_number 
    },
    validationData: []  
    })
    .then((data) => {
        console.log(data);
    })
    .catch(err => console.log(err));
}

【问题讨论】：

标签： reactjs amazon-web-services aws-amplify

【解决方案1】：

您还可以使用来自 aws-amplify https://aws-amplify.github.io/docs/js/cache 的缓存

【讨论】：

【解决方案2】：

您可以访问localStorage 与之交互。它用作基本的键/值存储，其中存储的数据永不过期。

要写入它，您使用localStorage.setItem() 方法，提供键和值作为其参数。

您可以稍后使用localStorage.getItem() 方法读取密钥的内容。

请在此处查看整个接口文档：

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

【讨论】：

【解决方案3】：

如果您不想管理本地存储并让 amplify auth 库处理来自create/re-use existing authentication resource 文档的设置和获取值，另一种选择是使用内置 cookie 存储。例如。使用 cookie 存储设置创建 Auth 实例：

Amplify.configure({
  Auth: {
    region: '',
    userPoolId: '',
    userPoolWebClientId: '',
    mandatorySignIn: false,
    cookieStorage: {
      domain: '127.0.0.1',
      path: '/',
      expires: 365,
      sameSite: 'strict',
      secure: true,
    }
  }
});

然后在你应用的正确位置，调用

user = await Auth.currentUserPoolUser()

应该从 cookie 存储中获取。例如，这可以用于在组件渲染之前检查用户是否已经有一个有效的会话并避免在页面重新加载时重新进行身份验证。

【讨论】：