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

Ionic Framework ionic-v3
1 
logout() {
    console.log('logged out');
    this.local.remove('id');
    this.nav.setRoot(IntroPage);
  }

I have a log in screen that is intro page. After logging in I set the root page to my tabs page. That all works fine. When I log out, I’m trying to reset the root to the login page, but that’s not happening. :stuck_out_tongue: The login page reappears, but the tabs are still present. When logging back in, another set of tabs stack on top of the old tabs. I can’t figure out how to clear them away.

The only thing that has kinda worked is window.location.reload(); as an alternative to the last line, but that seems a bit hacky. It flashes white they redirects to my login.

Thank you!

5 Likes
2

I ran into this same thing. Here’s how I fixed it:

In your “IntroPage”, I assume you’re passing in NavController to the constructor and setting this.nav = nav. Instead, pass in IonicApp and use getComponent to get the root nav…

So your @App template probably has a “template” that should look something like this:

template: '<ion-nav id="root-nav" [root]="rootPage"></ion-nav>',

Then your IntroPage should have a constructor like this:

constructor(app: IonicApp) {
        this.app = app;
        let nav = this.app.getComponent('root-nav');
        this.nav = nav;
}

Then when you logout this.nav.setRoot shoudl set the root of the root-nav. Make sure root-nav matches the id of your template in @App.

I hope that makes sense… someone else can probably explain it much better that me

1 Like
3

@bholub1
I have the same issue, would you please show me the compelete code?

4

I ran into the same problem as well, but I just did this:

// first remove the token from localStorage, then...
window.location.reload();

This also takes care of clearing everything in memory.

7 Likes
5

When you’re inside a tabbed component, instead of

this.nav.setRoot(IntroPage);

use this:

this.nav.rootNav.setRoot(IntroPage);

7 Likes
6

@ahemmings Thanks! fixed the carrying over of the tabs.

7

Been looking for this, thanks!

8

Great! But which one would be better, this.nav.rootNav.setRoot or window.location.reload()? How does these two different? Thanks!

9

Just updating in case anyone is having this issue after updating to Ionic@beta11.

I have to change
this.nav.rootNav.setRoot(SamplePage);

to this

import {App} from 'ionic-angular';
this.app.getRootNav().setRoot(SamplePage);

26 Likes
10

Tnks @Arcen works fine!

11

Thanks Arcen it works fine.

3 Likes
12

It works! thanks @Arcen

13

I was also facing the same problem solved with

this.navCtrl.parent.parent.setRoot(LoginPage);

try this code if some one is still facing this issue.

10 Likes
14

@sanjaychavan that’s awesome! thank! but when login again it show the back button at home page! simply mean the the navCtrl is not set to the root page

15

Hi! I tried this but it doesn’t work for me! after clicking button, nth showed up! ionic 2.0.0

16

Thanks!! It Works like a charm!

17

@sanjaychavan thank you so much! Work perfectly.

18

Thank you
It’s working file.

1 Like
19

I think all of these suggestions involving parent and getRootNav() should be avoided.

It is the webapp equivalent of spaghetti.

It is important to isolate aspects of your code, drawing strict boundaries between various spheres of influence. Subpages have no business messing with root navigation, nor should they even know how many parents they have or how they were instantiated. It is impossible to write comprehensive tests for an app component if a bunch of other unrelated pages are messing with its navigation stack.

So when you feel the need to do something like this, stop. Redesign your app so that you don’t need to. You will end up with a much clearer, readable, and testable app as a result.

20

Thanks @Arcen your Solution worked for Me.