aurelia - 如何获取登录错误的结果(从login.ts)到login.html

Question

我是 Aurelia 的新手，并且有一些 Javascript 背景。特别是，我从 https://blog.rackspace.com/part-2-building-serverless-architecture-aws 中获得灵感。和 https://github.com/auth0/aurelia-quote-app建立两个的合并。

我能够成功调用 AWS Cognito 并获得不同的验证结果。我知道通过在 Firefox 中打开开发人员控制台来监视不同场景的 console.logs 是成功的。

例如，我在 console.log 中得到不同的响应:

1. Coginto 中存在但密码错误的用户:“NotAuthorizedException:用户名或密码不正确。”
2. Cognito 中不存在的用户:“UserNotFoundException:用户不存在。”
3. 密码正确的用户:获取 JWT token

在我的login.html中，我打算通过${loginError}变量显示登录错误

  -- login.html

  <form role="form" submit.delegate="loginUser()">
       ...
       <button type="submit" class="btn btn-default">Login</button>
  </form>
  ...
  <div class="alert alert-danger" >${loginError}</div>
  ...

这样我就可以通过绑定(bind)的方式将login.ts中发生的异常通过html显示出来

在我的login.ts中，我通过以下方式调用cognitoUser.authenticateUser。

--login.ts
export class Login {
     ...
     isUserAuthenticated = false;
     ...
     loginError = '';
     ...
     loginUser() {
        cognitoUser.authenticateUser(authenticationDetails, {
          onSuccess: function (result) {
            console.log(result);
            this.isUserAuthenticated = true;
            location.assign('#/home');  
          },
          ...
          onFailure: function(err) {
             console.log(err);
             this.loginError = err;
             this.isUserAuthenticated = false;
           }
           ...

当 this.loginError 设置为 err 时，不会反射(reflect)在 html 中。这可能是因为 Javascript 中回调函数的性质……我正在尝试解决这个问题；鉴于html需要显示loginError，而实际错误来自authenticateUser中的回调函数。我相信 this.isUserAuthenticated 也会面临同样的问题。

积极的一面是，当登录成功时，location.assign('#/home');确实被执行(即使 this.isUserAuthenticated = true; 没有反射(reflect)在主 login.ts 中)

预先感谢您的帮助

Answer 1

回答我自己的问题，感谢 Callback function in aurelia js 的帮助

本质上使用 ES6 和箭头功能来访问“this”。

cognitoUser.authenticateUser(authenticationDetails, {
    onSuccess: (result) => {
    console.log(result);
    this.isUserAuthenticated = true;
    location.assign('#/home');  
    },
...
    onFailure: (err) => {
    console.log(err);
    this.loginError = err;
    this.isUserAuthenticated = false;
    }
});