如何在離子2中實現登錄流程？

所以我試圖從離子1開始使用離子2，並且需要一些關於如何在我的項目中設置驗證的指導。具體來說，我使用的是Firebase和angularfire2。如何在離子2中實現登錄流程？

作爲一般方法，我應該：

a。檢查app.ts上的session/localStorage並設置rootPage以在未經身份驗證的情況下登錄？如果我將用戶登出並將導航根頁面設置回登錄，則使用此方法，這些標籤顯示在底部。

灣創建登錄頁面作爲一種模式，它可以消除底部出現的選項卡問題，但我不確定是否應該從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 
    }

來源

2016-04-17 MonkeyBonkey

我在這個問題你問已經給出了答案http://stackoverflow.com/questions/36530765/how-to-set-up-firebase-with-ionic-2-angular-2-and-typescript –

下面是與JWT離子登錄的流程的一例存儲在本地存儲：

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

來源

2016-04-18 21:05:52

一個。檢查app.ts上的session/localStorage並將rootPage設置爲如果未經身份驗證則登錄？使用這種方法，如果我註銷用戶和設置NAV rootpage返回到登錄，突片在底部顯示。

您可以使用Angularfire2離子提供商，進入此鏈接查看更多細節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 ''; 
    } 
    } 
}

從App.ts進口

然後你剛剛創建的提供者，然後再檢查驗證狀態

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);

這不會在底部顯示標籤。

來源

2017-07-13 05:21:23

如何在離子2中實現登錄流程？

回答

相關問題