Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angularfire auth signout method isn't working after implementing tabmenu

I have a logout function in my app.component.ts which looks like this:

export class MyApp {
    @ViewChild(Nav) nav: Nav;

    constructor(){
       this.accountMenuItems = [
          { title: 'Login', component: AuthPage, icon: 'log-in' },
          { title: 'My Account', component: MyAccountPage, icon: 'contact' },
          { title: 'Logout', component: AuthPage, icon: 'log-out' },
       ];
    }

    logOut() {
       this.authenticate.signOut();

       //THIS BELOW ISN"T NEEDED WHEN I COMMENT OUT THE TABMENU
       this.nav.setRoot(this.accountMenuItems[2].component);
    }
}

and the signtout method in the auth service named authenticate:

signOut(): Promise<void> {
    return this.afAuth.auth.signOut();
}

But when I execute this function with tab menu it isn't signing out anymore I noticed when I outcomment the tab menu it is working here is the tab menu:

<ion-nav [root]="rootPage" main #content swipeBackEnabled="false"></ion-nav>

<ion-tabs>
    <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabIcon="search"></ion-tab>
    <ion-tab [root]="tab3Root" tabIcon="map"></ion-tab>
    <ion-tab [root]="tab4Root" tabIcon="bookmark"></ion-tab>
</ion-tabs>

tab1Root = HomePage;
tab2Root = RestaurantListPage;
tab3Root = NearbyPage;
tab4Root = FavoriteListPage;

When I comment out the tabs, it is working probably because I have two activeNavs?

like image 730
Sireini Avatar asked Apr 08 '18 12:04

Sireini


1 Answers

You are calling AuthPage to logOut, that's why You can not logOut and inside constructor of AuthPage You do not call a logOut function.

constructor(){
       this.accountMenuItems = [
          { title: 'Logout', component: AuthPage, icon: 'log-out' }, 
       ];
    }

To work your LogOut function, You can do this way. Create LogOutPage and inside the constructor call the logOut Function.

This is app.component.ts file

import { LogoutPage } from '../pages/logout/logout'; //import logout Page

export class MyApp {
@ViewChild(Nav) nav: Nav;

  constructor(){
     this.accountMenuItems = [
        { title: 'Login', component: AuthPage, icon: 'log-in' },
        { title: 'My Account', component: MyAccountPage, icon: 'contact' },
        { title: 'Logout', component: LogoutPage, icon: 'log-out' }, // calling logout Page
     ];
  }
}

This is logout.ts file

import { Component } from '@angular/core';
import { NavController} from 'ionic-angular';
import { LoginPage } from '../pages/login/login';

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

  constructor(public navCtrl: NavController) {
    //call signOut() method here using your auth provider
    this.nav.setRoot(LoginPage);
  }

}
like image 102
Sarasa Gunawardhana Avatar answered Nov 16 '22 04:11

Sarasa Gunawardhana