Gute Möglichkeit, Benutzer auf verschiedene Seiten umzuleiten

Question

Ich benutze Firebase in meiner ionic 3 App und ich möchte Benutzer auf verschiedene Seiten basierend auf ihrem Status umleiten.

Meine aktuellen Code sieht wie folgt aus:

ngOnInit():void { 
let that = this; 

firebase.auth().onAuthStateChanged((userAuth) => { 
    //Check if user is logged in on Firebase 
    if (userAuth && firebase.auth().currentUser) { 
     this.storage.set("userAuth", JSON.stringify(userAuth)); 
     firebase.database().ref('/accounts/' + firebase.auth().currentUser.uid).on('value', function(snapshot) { 
      if (snapshot.exists()) { 
       that.rootPage = TabsPage; 
       that.userData = snapshot.val(); 
       that.storage.set("userData", JSON.stringify(that.userData)).then((userData:any) => { 
        that.events.publish('user:created', userData); 
       }); 
       // set menuOptions 
       that.menuOptions.header.username = that.userData.firstName + " " + that.userData.lastName; 
       that.menuOptions.header.picture = that.userData.img; 
       that.menuOptions.header.email = that.userData.email; 

       let userCalories = that.calculateCalorieIntake(that.userData); 
       that.storage.set("userCalories", JSON.stringify(userCalories)); 

       // set rootPage 
       let premiumExpireDate = new Date(that.userData.premiumExpireDate); 
       let now = new Date(); 
       if (premiumExpireDate > now) { 
        that.rootPage = PremiumPage; 
       } 
      } else { 
       that.rootPage = OnboardingPage; 
      } 
     }); 
    } else { 
     //User is not logged in, redirect to LoginPage 
     that.rootPage = WelcomePage; 
    } 
}); 

Der Code funktioniert soweit ok, aber ich habe ein paar Probleme hier:

Problem 1: Irgendwann ein Benutzer, der nicht angemeldet ist in wird auf die "OnboardingPage" umgeleitet, kann jemand erklären warum?

Problem 2: Für mich sieht der Code bis jetzt wirklich dreckig aus. Hast du irgendwelche Empfehlungen, um es zu verbessern?

Answer 1

Lassen Sie sich diese Situation in einer sauberen Art und Weise handhaben, so dass für Problem 2 Problem 2 erste

Lösung lösen:

Es gibt eine Reihe von Refactoring-Techniken, die Sie ausführen können. Trennen Sie die login, überprüfen Sie, ob loggedIn, userInfo usw. in eine Servicedatei. Lassen Sie eine Service-Datei erstellen, die auth.provider.ts

auth.provider.ts genannt wird

@Injectable() 
export class AuthProvider { 
    constructor(...) {} // inject all dependencies i.e. firebase auth modules 

    login(credeitials: UserLoginForm): Observable<any> { 
    // login logic 
    } 

    isLoggedIn(): boolean { 
    // is loggedin logic 
    return firebase.auth().currentUser !== null; 
    } 

    logout(): Observable { 
    // logout logic 
    } 

} 

Genau diesen Service in app.module.ts registrieren. Jetzt haben wir unseren Zauberstab erschaffen. Injizieren Sie einfach als Abhängigkeit in eine Seite constructor, wo Sie die Authentifizierung adressieren möchten.

Lassen Sie uns jetzt das Problem 1;

Irgendwann leitet Benutzer auf OnboardingPage um, das bedeutet Benutzersitzung ist noch nicht abgelaufen, also keine Sorge. Wenn Sie die Benutzerumleitung auf Seiten basierend auf Authentifizierung durchführen möchten. Ich habe folgende Ansätze für bestimmte Szenarien:

Redirect Benutzer zum Login-Seite, wenn nicht In Ihrer app.omponent.ts Datei injizieren, um die AuthProvider als Abhängigkeit im Konstruktor und Call-Methode isLoggedIn angemeldet(), die wir in unserem Provider oder Service erstellt haben. Wenn es zurückgibt false Benutzer umleiten zu LoginPage else on OnboardingPage.

Authentifizierungsprüfung beim Wechsel zwischen den Seiten Ionic bieten uns Seite Lebenszyklus Haken, in denen wir unsere Logik schreiben können. Ich werde spezifische haken im Zusammenhang mit diesem Szenario, das Anruf ionViewCanEnter() override dieser Hook Call gleiche Methode von isLoggedIn() oder Ihre eigene Methode in diesem Hook; Prompt oder Redirect basierend auf dem Authentifizierungsstatus des Benutzers.

weitere Lesung am Lebenszyklus Haken (muss AuthProvider als Abhängigkeit im Konstruktor der Zielseite injizieren): http://ionicframework.com/docs/api/navigation/NavController/#lifecycle-events