Tabs persist after logging out of app, start stacking on log in

Ionic Framework ionic-v3
21

This worked for me as well :slight_smile:

22

This does not work for me , I get a warning on the console saying (getRootNav) is deprecated and will be removed in the next major release. Use getRootNavById instead.

23

@saidatta123 You might want to try something along these lines if you’re still running into problems:

At the top of your page include the App module from ‘ionic-angular’:

import { App } from 'ionic-angular';

After that, be sure to add it in your constructor as well:

constructor(public app: App)

Once you’re all set up with that, include this line whenever you want to go back to your Login Page:

this.app.getRootNav().setRoot("Login Page of your Application");

The resource for this comes from here.

Hope it helps! :smiley:

1 Like
24

I completely disagree with the advice in the previous post. It is unmaintainable spaghetti. A much better idea is to subscribe to an Observable representing user authentication state in the app component and change the root page from there.

3 Likes
25

@rapropos Thanks for the tip! I actually implemented changing the root around after determining whether or not the user is logged in from the local storage. Much easier to maintain than trying to grasp at the root.

26

Thanks @Arcen, work me :D!

27

this.app.getRootNav().setRoot(SamplePage);

thanks!!!

28

@rapropos
Can you be more elaborate with some example code? :frowning:

1 Like
29

@JeffMinsungKim, @rapropos probably meant something like this, where onAuthStateChanged is provided by AngularFire for us to subscribe to, checking if a user is or is not logged in.

import { AngularFireAuth } from 'angularfire2/auth';
import { LoginPage } from '../pages/login/login';
import { TabsPage } from '../pages/tabs/tabs';

export class MyApp {
rootPage: any;

constructor(private afAuth: AngularFireAuth) {

platform.ready().then(() => {
let authCheck = afAuth.auth.onAuthStateChanged(user => {
    if (user) {
       this.rootPage = TabsPage;
         } else {
       this.rootPage = LoginPage;
       }
    });
  })
 }
}

If either or both pages (TabsPage and LoginPage) are lazy-loaded and have their own module.ts, use strings, i.e

this.rootPage = 'TabsPage';  //instead of TabsPage

this.rootPage = 'LoginPage'; //instead of LoginPage

and don’t import them into app.component.ts. That is, you can leave out

import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';

you can (and have to) reference them directly by putting strings around them, as shown above if they are lazy-loaded :slight_smile:

30

Thank you @jaydz.
In fact, I am using code similar to the example you’ve given. However, the main reason why I used the following code is that to avoid having the bottom tabs after logging out. Is there any better way to handle this problem?

setting.ts

async logout() {
    const user: any = await this.authService.signOut();
    this.app.getRootNav().setRoot('LoginPage'); // Better way to fix this line?
    this.toastService.show(`Signed out as ${user.email}`);
  }

app.component.ts

export class MyApp {
  rootPage:string;

  constructor(afAuth: AngularFireAuth, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    
    const unsubscribe = afAuth.auth.onAuthStateChanged(user => {
      if (user) {
        this.rootPage = 'HomePage';
        unsubscribe();
      } else {
        this.rootPage = 'LoginPage';
        unsubscribe();
      }
    });

    platform.ready().then((readySource) => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      console.log('Platform ready from', readySource);
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}
31

That one I can’t really help with. I avoid tabs (for reasons like this).
The only workaround I know of is to set the tabs to hidden when you want them to be “gone”.

I used this approach a while back but can’t remember the specifics of how I implemented it. In TabsPage.html

<ion-tab tabsHideOnSubPages="true" //etc

That may be enough to do the trick for you. Personally, I could not figure a way to do it legitimately with navigation

32

Removed unsubscribe() work like a charm. No longer need to relies on getRootNav().setRoot()

33

Thanks @sanjaychavan worked fine

34

thaaaaaaaaaaaaanks! :):+1:

35

worked with me, many thaaaaanks