Come implementare il flusso di login in ionic 2?

Question

Quindi sto provando a iniziare con ionic 2 di ionic 1 e ho bisogno di una guida su come impostare l'autenticazione nel mio progetto. Nello specifico sto utilizzando firebase e angularfire2.

Come approccio generale dovrei neanche:

a. Controllare la sessione/localStorage su app.ts e impostare la rootPage per accedere se non autenticato? Usando questo metodo se registro l'utente e reimpostato la pagina di root per il login, le schede sono visualizzate in basso.

b. Crea la pagina di accesso come una modal che rimuove il problema delle schede che appaiono in basso, ma non sono sicuro se dovrei licenziare la modal da app.ts poiché non sono sicuro che l'applicazione abbia una vista root Dovrei fare riferimento

Inoltre, dovrei impostare il login e il logout come servizio e rifattarlo anziché averlo nella pagina di login e il pulsante di disconnessione nei controller del profilo?

Ecco la mia logica finora usando il metodo A:

app.ts

export class MyApp { 
    rootPage: any; 
    local: Storage = new Storage(LocalStorage); 
    constructor(platform: Platform) { 
    this.local.get('user').then(user => { 
     if (user) { 
     this.rootPage = TabsPage; 
     } else { 
     this.rootPage = LoginPage; 
     } 
    }); 

    platform.ready().then(() => { 
     StatusBar.styleDefault(); 
    }); 
    } 
} 

E in myProfile.ts

logout() { 
    this.local.remove('user'); 
    this.user = null; 
    let modal = Modal.create(LoginPage); 
    this.nav.present(modal); //should I set the rootPage instead? if so how do I remove the tabBar or set the rootpage of the containing app root page 
    } 

Answer 1

Ecco un esempio di un flusso di accesso ionico con JWT memorizzato nella memoria locale:

https://github.com/RedFroggy/ionic2-nfc-app/tree/master/app/pages/login

Answer 2

a. Controllare la sessione/localStorage su app.ts e impostare la rootPage su login se non autenticato? Usando questo metodo se registro l'utente e reimpostato la rootpage della pagina di accesso al login, le schede vengono visualizzate sul fondo .

È possibile utilizzare Angularfire2 ionico Provider, andare a questo link per maggiori dettagli Angularfire2 Auth with Ionic

import { Observable } from 'rxjs/Observable'; 
import { Injectable } from '@angular/core'; 
import { AngularFireAuth } from 'angularfire2/auth'; 
// Do not import from 'firebase' as you'll lose the tree shaking benefits 
import * as firebase from 'firebase/app'; 

@Injectable() 
export class AuthService { 
    private currentUser: firebase.User; 

    constructor(public afAuth: AngularFireAuth) { 
    afAuth.authState.subscribe((user: firebase.User) => this.currentUser = user); 
    } 

    getauthenticated(): boolean { 
    return this.currentUser !== null; 
    } 

    signInWithFacebook(): firebase.Promise<any> { 
    return this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()); 
    } 

    signOut(): void { 
    this.afAuth.auth.signOut(); 
    } 

    displayName(): string { 
    if (this.currentUser !== null) { 
     return this.currentUser.facebook.displayName; 
    } else { 
     return ''; 
    } 
    } 
} 

Poi dal App.ts Importa il provider appena creato e quindi controllare lo status di Auth

constructor(public authService: AuthService) { 
    let authState = this.authservice.getauthenticated(); 
    if (authState) { 
     this.rootPage = TabsPage; 
     } else { 
     this.rootPage = LoginPage; 
     } 
    } 

E infine per il logout utilizzare Navigating from an Overlay Component

import { App } from 'ionic-angular'; 
constructor(
     public appCtrl: App 
    ) {} 

    setRoot(Page:any) { 
     this.appCtrl.getRootNav().setRoot(Page); 

Questo non mostrerà le schede in basso.