How to remove all views except the login view in Ionic 2?

Question

I made a ionic 2 with tabs by

ionic starts project1 tabs --v2

then I added a page and a provider:

ionic g provider authService
ionic g page loginPage

I set root after logged in successful:

this.nav.setRoot(TabsPage)

It's navigated to HomePage. I set root when logging out:

this.nav.setRoot(LoginPage)

The problem is when I logged out the tab panel still appeared and all the page seemed to still can be navigated to.

How can I destruct all page when I log out and hide the tabs panel too?

Answer 1

I tried to create a similar project like yours and added a login button in the login page. Click event is bind to:

this.navCtrl.setRoot(TabsPage);

In the TabsPage component, try to use App controller as follows:

import { Component } from '@angular/core';
import { App } from 'ionic-angular';

import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { LoginPage } from '../login-page/login-page';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = HomePage;
  tab2Root: any = AboutPage;
  tab3Root: any = ContactPage;

  constructor(public appCtrl: App) {

  }

  logout() {
    this.appCtrl.getRootNav().setRoot(LoginPage);
  }
}

Assume we add a logout button on the navigation bar in tabs.html as follows:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
    <ion-buttons end>
      <button ion-button color="primary" (click)="logout()">Logout</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

Answer 2

I also had a similar issue where I wanted to clear the nav history if certain condition is not met and push back the user to the first page in line. But when the user click back button it navigates back to the last active page. I fixed the issue by setting the root page when the condition is not met and then pushing the first page so when the user clicks the back button he is sent to the root page.

// set the root page so navigation history is cleared.
this.navCtrl.setRoot('RootPage').then(res => {
  // if success push the first page in line
  this.navCtrl.push('FirstPage');
});

Answer 3

If you are in Angular, use the Router and replaceUrl attribute from NavigationExtras:

constructor(private router: Router) { }

logout() {
  this.router.navigate(['/login'], { replaceUrl: true });
}

Answer 4

To clear all the nav history in ionic (i.e pop all the pages from Nav Stack).

Most Easy and simple way is to use NavController from @ionic/angular.

Step goes as follow :-

1) First inject NavController service in constructor like

constructor(private navCtrl: NavController) { }

2) Now on your logout method where you logout the user call this

this.navCtrl.navigateRoot('/login'); // login might be your root page after logout or it could be any page where you want to redirect after logout

This navigateRoot method pops all the pages and insert the provided page in the stack

Note: This approach will only work when you are using angular with ionic, for react or vue you should try some other way.

Hope this will help you or somebody else :-)