Wartet in Ionic 2 Typoskript für lokalen Speicher versprechen zu lösen, bevor fortfahren

Question

Ich habe eine Ionic 2-Anwendung, in der ich eine Logout-Funktionalität implementieren möchte. Ich möchte den Wert eines JSON-Webtokens im lokalen Speicher auf null setzen und dann, nachdem der Wert festgelegt wurde, den Benutzer zur Anmeldeseite senden.

Ich habe ein Problem, bei dem die Anwendung nicht darauf wartet, dass der Wert der JWT festgelegt wird, bevor der Benutzer zur Anmeldeseite weitergeleitet wird. Dies ist ein Problem, da ich auf der Anmeldeseite eine Funktion habe, um den Benutzer automatisch einzuloggen, wenn sie eine gültige JWT haben. Da das Programm nicht blockiert und darauf wartet, dass der Wert im Speicher festgelegt wird, wird der Benutzer sofort nach dem Abmelden erneut angemeldet.

Wie kann ich auf den Wert des Tokens warten, bevor der Benutzer zurück auf die Anmeldeseite gesendet wird?

Abmelden Funktionalität:

logout() { 
this.storage.ready().then(() => { 
    this.storage.set('token', '').then(data => { 
     this.navCtrl.setRoot(LoginPage); 
    }); 
}); 

CheckAuthentication Funktionalität:

checkAuthentication() { 
return new Promise((resolve, reject) => { 
    this.storage.get('token').then((value) => { 

    this.token = value; 

    let headers = new Headers(); 
    headers.append('Authorization', this.token); 

    this.http.get('apiURL', { headers: headers }) 
     .subscribe(res => { 
     resolve(res); 

     }, (err) => { 
     reject(err); 
     }); 

    }); 

    }); 
    } 

IonViewWillLoad:

ionViewWillLoad(){ 
//Check if already authenticated 
    this.auth.checkAuthentication().then((res) => { 
     console.log("Already authorized"); 
     this.loading.dismiss(); 
     this.navCtrl.setRoot(HomePage); 
    }, (err) => { 
     console.log("Not already authorized"); 
     this.loading.dismiss(); 
    });} 

Answer 1

Es gibt ein paar Dinge, die Sie hier tun können.

Zunächst würde ich den Code umgestalten, um es ein wenig lesbarer zu machen. Wenn Sie sehen, wie ich die unten stehenden Funktionen habe, werden Sie feststellen, dass wir die Vorteile nutzen, die uns die natürlichen Versprechungen geben, indem wir sie zusammenketten, ohne unsere then() s verschachteln zu müssen.

In checkAuthentication() müssen Sie das Versprechen nicht wie Sie erstellen. Sie können das http Observable einfach als Versprechen zurückgeben. Wenn der http-Aufruf erfolgreich war, wird das Versprechen aufgelöst. Wenn der HTTP-Aufruf fehlschlägt, wird das resultierende Versprechen abgelehnt.

Zuletzt würde ich versuchen, ionViewDidLoad anstelle von willLoad zu verwenden.

logout() { 
 
    this.storage.ready() 
 
    .then(() => this.storage.set('token', '')) 
 
    .then(data => this.navCtrl.setRoot(LoginPage)) 
 
} 
 

 
checkAuthentication() { 
 
    return this.storage.get('token') 
 
    .then((value) => { 
 
     this.token = value; 
 

 
     let headers = new Headers(); 
 
     headers.append('Authorization', this.token); 
 

 
     return Observable.toPromise(
 
     this.http.get('apiURL', { headers: headers }) 
 
    ); 
 
    }); 
 
} 
 

 
ionViewDidLoad() { 
 
    this.auth.checkAuthentication() 
 
    .then((res) => { 
 
     console.log("Already authorized"); 
 
     this.loading.dismiss(); 
 
     this.navCtrl.setRoot(HomePage); 
 
    }) 
 
    .catch((err) => { 
 
     console.log("Not already authorized"); 
 
     this.loading.dismiss(); 
 
    }); 
 
}

Answer 2

In der Logout-Funktion es Token eher es als Set leer '' entfernen sollte. Weil das Token nach dem Abmelden noch im Speicher vorhanden ist.

this.storage.removeItem('token')