イオン2でログインフローを実装する方法は？

Question

イオン1からイオン2を開始しようとしており、プロジェクトで認証を設定する方法についてのガイダンスが必要です。特に私はfirebaseとangularfire2を使用しています。

一般的なアプローチとして、私は次のいずれかを行う必要があります。

a。 app.tsのsession/localStorageを確認し、認証されていない場合はrootPageをログインに設定しますか？このメソッドを使用すると、ユーザーをログアウトしてnavのルートページをログインに戻すと、タブが下部に表示されます。

b。下に表示されるタブの問題を取り除くモーダルとしてログインページを作成しますが、アプリケーション自体にルートビューがあるかどうかわからないので、私はapp.tsからモーダルを発生させるべきかどうかはわかりません私は参照する必要があります。

また、ログイン・ページとプロファイル・コントローラのログアウト・ボタンではなく、サービスとして認証とログアウトを設定してリファクタリングする必要がありますか？

ここで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(); 
    }); 
    } 
} 

そして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

。ここJWTとイオンのログインフローの一例ですがローカルストレージに格納される。

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

Answer 2

a。 app.tsでsession/localStorageを確認し、認証されていない場合はrootPageを に設定しますか？このメソッドを使用してユーザーをログアウトし、 navルートページをログインに戻した場合、タブは の下部に表示されます。

あなたは認証の状態をチェックし、その後、より詳細Angularfire2 Auth with Ionic App.tsインポートから次に

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 ''; 
    } 
    } 
} 

作成したばかりのプロバイダのために、このリンクに移動し、Angularfire2イオンプロバイダを使用することができ

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

最後にログアウト用Navigating from an Overlay Component

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

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

これは、下部にタブを表示しません。