How to realize input stream in ionic 2?

Question

So, I'm trying to get started with ionic 2 from ionic 1 and you need to be guided by how to configure authentication in my project. In particular, I use firebase and angularfire2.

As a general approach, I should:

a. Check the / localStorage session on app.ts and set rootPage to log in if it does not authenticate? Using this method, if I log out of the user account and return to the root URL, the tabs appear below.

b. Create the login page as modal, which removes the problem with the tabs appearing below, but I'm not sure that I have to fire the modal from app.ts, since I'm not sure if the application has root mode, I have to link.

In addition, should I configure authorization and logout as a service and reorganize it, and not have it on the login page and the logout button in the profile controllers?

Here is my logic using method 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(); }); } } 

And 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

a. Check the / localStorage session on app.ts and set rootPage to login if it is not authenticated? Using this method, if I register a user and return the root navigation page to login, the tabs are displayed at the bottom.

You can use the Angularfire2 Ion provider, follow this link for more information on 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 ''; } } } 

Then from App.ts Import the Provider that you just created, and then check the status of Auth

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

And finally, to log out, use the Move from Overlay component.

 import { App } from 'ionic-angular'; constructor( public appCtrl: App ) {} setRoot(Page:any) { this.appCtrl.getRootNav().setRoot(Page); 

This does not display the tabs below.

Answer 2

Here is an example of an ion input stream from jwt stored in local storage:

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