Ionic 2 Login Komponente und Auth Service

Question

Ich entwickle ein einfaches Login in meiner Ionic 2 App.

Ich habe eine Login-Komponente, die meine Login-Ansicht rendert und dann E-Mail und Passwort an den Auth-Dienst sendet, der validiert, ein Token speichert und wahr oder falsch an die Login-Komponente zurückgibt.

Anmeldungs ​​Komponente:

export class LoginPage { 

    email: string; 
    password: string; 

    constructor(public navCtrl: NavController, public navParams: NavParams, public authentifiction: Authentification) {} 

    login() { 
     this.authentifiction.login(this.email, this.password); 
    } 

    loginSuccess() { 
     console.log('Success'); 
    } 

    loginError() { 
     console.log('Failed'); 
    } 

} 

Und mein Auth Service:

export class Authentification { 

    public authorized: boolean; 

    constructor(public http: Http, private alertCtrl: AlertController, public storage: Storage) {} 

    login(email, password) { 
     var params = 'email=' + email + '&password=' + password; 
     var headers = new Headers(); 
     headers.append('Content-Type', 'application/x-www-form-urlencoded'); 

     return this.http.post('URL', params, { 
      headers: headers}) 
      .map(res => res.json()) 
      .subscribe(
       data => this.loginSuccess(data.auth_token), 
       error => this.loginError() 
     ); 
    } 

    loginSuccess(auth_token) { 
     this.storage.set('auth_token', auth_token); 
     ??? 
    } 

    loginError() { 
     ??? 
    } 

} 

Wie kann ich die Auth-Service Rückkehr wahr oder falsch haben je nachdem, ob die Anmeldung erfolgreich war oder nicht?

Die gesamte beobachtbare Sache für mich immer noch ein bisschen verwirrend ist ...

Answer 1

Sie nicht direkt ein boolean zurückgeben, da die HTTP-Anforderung nicht sofort antwortet. Stattdessen geben Sie dem Anrufer ein Observable zurück und sagen ihm: "Ich habe die Antwort noch nicht, aber hier ist ein Observable, der Ihnen die Antwort merken wird, sobald ich sie habe". Dann abonniert der Anrufer diese Observable (wie eine Mailingliste) und erhält ein Signal (wie das Empfangen einer E-Mail) mit der Antwort.

login(email, password): Observable<boolean> { 
... 
return this.http.post('URL', params, { 
    headers: headers 
}).map(res => { 
    this.storage.set('auth_token', res.json().auth_token); 
    return true; 
}); 

Und von dem Anrufer:

login() { 
this.authentifiction.login(this.email, this.password).subscribe(res => { 
    console.log('success'); 
}, error => { 
    console.log('error'); 
});