Pop to a page before Tabs page IONIC2

Ionic Framework ionic-v3
1

Hello, I’m having a navigation issue with my app and I can’t figure how to fix it. I’ve been looking for a solution in this forum with no luck. Here is the issue:

I have an app which has a log in. After you successfully log in, it redirects you to a tabs page.

My question is: how is it possible to get to the login page again?

When I hit logout, it, among other stuff should redirect you to the root page, this.navCtrl.popToRoot ();. My problem is that the tabs gets blank (the tabs doesn’t disappear) and I am no able to do any more stuff. I’d like this to redirect me to the login page. Any recommendations?

Thanks!

2

Could you post some code? Is your login page the root page of your app? Is it a normal page? A modal?

have you tried to set the login page as root again and then navigating to it? like:
this.navCtrl.setRoot(LoginPage);
this.navCtrl.push(LoginPage);

3

Login.ts:
this.navCtrl.push (Tabs);

Tabs.ts
tab1Root: any = One; tab2Root: any = Two; tab3Root: any = Three;

Tabs.html
<ion-tabs> <ion-tab [root] = "tab1Root" tabTitle = "one"></ion-tab> <ion-tab [root] = "tab2Root" tabTitle = "two"></ion-tab> <ion-tab [root] = "tab3Root" tabTitle = "three"></ion-tab> </ion-tabs>

I don’t understand it very good. I’m setting those three tabs to the root page of each tab. But when I run the command this.navCtrl.popToRoot (); it turns blank.

4

Hi, I have exactly the same problem : did you find a solution?

I tried several combinations :

  1. The following code does nothing.

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

  1. This code makes the LoginPage appear BUT the Tabs remain (and it is possible to navigate to the other tabs)

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

  1. This code does nothing

this.navCtrl.setRoot(LoginPage);
this.navCtrl.pop(TabsPage);
this.navCtrl.popToRoot();

Please help me to find out if this is a bug of Ionic 2 or if there is a way to solve the problem.

5

Hahaha. Loved the third one.

I have found the solution.

import { App } from 'ionic-angular'; // add this library.

constructor (
  public app: App // initialize it.
) {}

logut () { // and in the function, 
  this.authServ.logout (); // this is a function to logout from the server
  const root = this.app.getRootNav (); // in this line, you have to declare a root, which is the app's root 
  root.popToRoot (); // here you go to the root.
}

Hope it works for you as well, if not, maybe I forgot something that I can’t remember now. Hope it does, thou.

Happy coding!

1 Like
6

Thank you very much for you (quick) answer.
But it still doesn’t work… I still see the Tabs.
If you find another line of code… or if someone else has solved the problem…

7

It should work. I’ve seen my code and there’s no extra code besides that.

Could you share some of your work? Like how are you calling the tabs, your whole app.component, and everything you think that could help me in order to help you.

Do you have errors with my code? What is the behavior?

8

If you’re not wedded to using pop, here’s how I handle this situation. I have a service that exposes an authentication notifier which is a ReplaySubject<boolean> with a stack depth of 1. In the platform.ready stanza of the app component’s constructor, I subscribe to it and change the app’s root page like so:

authenticationNotifier.subscribe((authed) => {
  if (authed) {
    this.rootPage = AuthedPage;
   } else {
    this.rootPage = UnauthedPage;
   }
});

Now from anywhere else in the app, we can inject the service that provides the authentication notifier, and call next(true) on it to say “the user is now authenticated (they logged in successfully)” or next(false) to say “no longer authenticated (logged out, session timed out, whatever)”. Nobody has to mess around with NavControllers at all.

2 Likes
9

@RaulGM
I have to mention that I still use the beta 11 version (because the build is way faster). I suspect it comes from there. So I will freeze this problem for the moment and wait the migration to see if the problem persists.

@rapropos
Thank you for your valuable advise. It could definitively be a way to solve this.

10

@rapropos Thank you for this! I’ve been struggling with how to present a modal login form anytime a JWT is expired and your solution worked perfectly!

11

this.appCtrl.goBack(); worked for me