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

Question

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

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

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

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

我包含我的注册函数的代码。

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

Answer 1

您可以访问 localStorage 与其互动。它作为必不可少的 key/value 存储，存储的数据永不过期。

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

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

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

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

Answer 2

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

Answer 3

如果您不想管理本地存储并让 amplify auth 库处理设置和获取值，另一种选择是使用内置 cookie 存储，来自 create/re-use existing authentication resource 文档。例如。使用 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 存储中获取。例如，这可用于在组件呈现之前检查用户是否已有有效会话并避免在页面重新加载时重新验证。

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

How to set aws amplify data in localStorage ReactJS

amazon-web-services

reactjs

aws-amplify