Wie bekomme ich das Ergebnis von Login-Fehler (von login.ts) zu login.html

Question

Ich bin neu in Aurelia und habe Hintergrundwissen in Javascript. Insbesondere nehme ich die Inspiration von https://blog.rackspace.com/part-2-building-serverless-architecture-aws und https://github.com/auth0/aurelia-quote-app, um eine Zusammenführung von zwei zu erstellen.

Ich bin erfolgreich in der Lage, Anruf an AWS Cognito zu machen und verschiedene Validierungsergebnisse zu erhalten. Ich weiß, dass diese erfolgreich sind, indem die Entwicklerkonsole in Firefox geöffnet wird, um console.logs für verschiedene Szenarien zu überwachen.

Zum Beispiel bekomme ich unterschiedliche Antworten in console.log:

1. Benutzer, die in Coginto existieren, aber falschem Passwort: "NotAuthorizedException. Falscher Benutzername oder Passwort"
2. Benutzer, die nicht in Cognito vorhanden sind: "UserNotFoundException: Benutzer existiert nicht." korrektes Passwort
3. Benutzer mit: das JWT Token

In meinem login.html beabsichtige ich die Login-Fehler durch den $ anzuzeigen {loginError} Variable

-- 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> 
    ... 

, damit ich zeigen kann die Ausnahmen, die in login.ts durch die HTML durch Bindung auftreten

In meiner login.ts, rufe ich cognitoUser.authenticateUser in der folgenden Weise.

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

Wenn this.loginError in den HTML-Code irren gesetzt ist, reflektiert es nicht. Dies liegt wahrscheinlich an der Art der Rückruffunktionen in Javascript ... Ich versuche herauszufinden, wie ich das Problem lösen kann. vorausgesetzt, dass die html den loginError anzeigen muss und der eigentliche Fehler aus einer Callback-Funktion in authenticateUser kommt. Ich bin zuversichtlich, dass this.isUserAuthenticated auf das gleiche Problem stoßen wird.

Auf der positiven Seite, wenn die Anmeldung erfolgreich ist, die location.assign ('#/home'); nicht ausgeführt werden soll (auch wenn this.isUserAuthenticated = true; nicht in den wichtigsten login.ts reflektiert werden)

Vielen Dank im Voraus für Ihre Hilfe

Answer 1

meine eigene Frage zu beantworten, dank Hilfe von Callback function in aurelia js

Verwenden Sie im Wesentlichen die ES6- und Pfeilfunktion für den Zugriff auf das "Dies".

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