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中获得了不同的响应：

存在于Coginto但密码错误的用户：“NotAuthorizedException：用户名或密码不正确。”
Cognito中不存在的用户：“UserNotFoundException：用户不存在。”
密码正确的用户：获取JWT令牌

在我的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>
  ...

这样我就可以通过绑定

在我的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时，它不会反映在html中。这可能是因为Javascript中回调函数的性质......我试图弄清楚如何解决这个问题;鉴于html需要显示loginError，并且实际错误来自authenticateUser中的回调函数。我相信this.isUserAuthenticated将面临同样的问题。

从积极的方面来说，当登录成功时，location.assign（'＃/ home'）;会被执行（即使this.isUserAuthenticated = true;不会反映在主login.ts中）

提前感谢您的帮助

Answer 1

在Callback function in aurelia js

的帮助下，回答我自己的问题

基本上使用ES6和箭头功能来访问＆＃34; this＆＃34;。

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;
    }
});

如何获取登录错误的结果（从login.ts）到login.html

1 个答案: