Ionicタブ＆認証 - ログアウト後にタブが残っています

Question

タブと認証を持つIonicアプリを持っていますが、認証は完全に機能しますが、ログアウトするとタブは表示されます。ここに私のログイン方法は次のとおりです。

this.authProvider.loginUser(email, password).then(
    authData => { 
     this.loading.dismiss().then(() => { 
     this.navCtrl.push(TabsPage); 
     //this.navCtrl.setRoot(TabsPage); 
     }); 

そして、ここでは私のログアウト方法は次のとおりです。

logOut(): void { 
    this.authProvider.logoutUser().then(() => { 
     this.navCtrl.setRoot('LoginPage'); 
     this.navCtrl.popToRoot(); 
    }); 
    } 

すべてのヘルプはビューからタブを削除するにはAppの使用getRootNav

Answer 1

を高く評価しました。 this working versionを参照してください。

import { Component } from '@angular/core'; 
import { NavController, App } from 'ionic-angular'; 
import { LoggedInComponent } from '../../pages/loggedIn/loggedIn.component'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    constructor(public navCtrl: NavController, public app : App) {  
    this.loggedInPage=LoggedInComponent; 
    } 

    goTopage(){ 
    this.app.getRootNav().setRoot(this.loggedInPage); 
    } 
} 

Answer 2

私は回答済みの記事のアドバイスに完全に同意しません。 parentとgetRootNav()を含むすべての提案は避けるべきです。 それは維持できないスパゲッティです。はるかに良いアイデアは、アプリケーションコンポーネントのユーザー認証状態を表すObservableを購読し、そこからルートページを変更することです。

FirebaseのIonicアプリを使用しているかどうかはわかりません。現時点でFirebaseを使用している場合、使用することを強く推奨する以下の簡単なコード例を示します。

app.component.ts方法はコールバックにかかる認証状態を監視し

constructor() { 
    platform.ready().then((readySource) => { 
     afAuth.auth.onAuthStateChanged(user => { 
      console.log("App User", user); 
      if (user) 
       this.rootPage = 'HomePage'; // Tabs reside here 
      else 
       this.rootPage = 'LoginPage'; 
      }); 
      statusBar.styleDefault(); 
      splashScreen.hide(); 
     }); 
     } 

onAuthStateChanged()。そして、このコールバックは、認証状態がに変更されるたびに鳴ります。したがって、ユーザーがログインした場合でもユーザーがログアウトした場合でも、このコールバック関数はユーザー=> {}をトリガーします。

設定.tsサインアウト機能を配置するページがあります。

async logout() { 
    const user: any = await this.authService.signOut(); 
} 

したがって、あなたはもうthis.app.getRootNav().setRoot('Some Page');を使用する必要はありません。 Firebaseはあなたのためにすべての世話をします。

私はこの記事には、いくつか他の人に役立ちます願っています。