通过Amplify坚持使用AWS Cognito用户

时间:2018-11-27 02:18:57

标签: reactjs amazon-web-services amazon-cognito aws-amplify amplifyjs

我一直关注Serverless Stack tutorial,可以通过致电Auth.signIn(username, passsword)来获得肯定的答复

我们当前的工作流程是,随着帐户的发放,用户将需要重置密码。

.changePassword函数带有3个参数;用户,oldPassword,newPassword

我无法为自己的生活弄清楚用户在寻找什么。设置从.signIn()返回的对象时,出现以下错误:

  

本地存储缺少ID令牌,请进行身份验证

很显然,我不会将这种流程用于生产,但是我试图弄清楚Auth在寻找什么。

Auth.signIn(this.state.emailAddress, this.state.password)
  .then(user => {
    this.setState({ isLoading: false, user });
  }).then(async () => {
    Auth.changePassword(this.state.user, 'P@ssw0rd!', 'NewP@ssw0rd!');
  }).catch(err => {
    this.setState({ isLoading: false, errorMessage: err.message })
});

我确实从.signIn返回的对象的Storage属性中看到了ID令牌。为了澄清:我可能不应该将其放在链接中。我在实践中并没有真正做到以上。当我保存来自登录的响应并将其传递给changePassword时,出现本地存储错误。我想知道是否存在设置Amplify的配置问题,该问题通常会将此信息放置在localStorage中。

1 个答案:

答案 0 :(得分:1)

Auth.changePassword的第一个参数是CognitoUser,它是Auth.signInshould be returned的东西。

这里的问题是您的诺言链,并使用this.setState()并在实际设置之前将其读回:

Auth.signIn(this.state.emailAddress, this.state.password)
  .then(user => {
    // Triggers a setstate here:
    this.setState({ isLoading: false, user });
  }).then(async () => {
    // this.state.user is not defined at this point
    Auth.changePassword(this.state.user, 'P@ssw0rd!', 'NewP@ssw0rd!');
  }).catch(err => {
    this.setState({ isLoading: false, errorMessage: err.message })
});

来自React docs

  

setState()并不总是立即更新组件。它可能会批量更新或将更新推迟到以后。这使得在调用setState()之后立即读取this.state是潜在的陷阱。相反,请使用componentDidUpdatesetState回调(setState(updater, callback)),可以保证在应用更新后会触发二者之一。如果需要基于先前的状态来设置状态,请阅读以下有关updater参数的信息。

解决此问题的最简单方法是在第一个.then回调中返回用户,并将其传递给第二个:

Auth.signIn(this.state.emailAddress, this.state.password)
  .then(user => {
    // Triggers a setstate here:
    this.setState({ isLoading: false, user });
    return user;
  }).then((user) => {
    // this.state.user is not defined at this point
    Auth.changePassword(user, 'P@ssw0rd!', 'NewP@ssw0rd!');
  }).catch(err => {
    this.setState({ isLoading: false, errorMessage: err.message })
});

我个人认为,完全在异步/等待中看起来会好很多:

try {
    const user = await Auth.signIn(this.state.emailAddress, this.state.password);

    this.setState({ isLoading: false, user });

    await Auth.changePassword(user, 'P@ssw0rd!', 'NewP@ssw0rd!');
} catch (err) {
    this.setState({ isLoading: false, errorMessage: err.message })
}