How can I set a root page outside of tabs that don't keep the tabs in place?

Question

The flow of my app means that there are no tabs in place until a user logs in. The first page is a full-screen login screen. Once logged in the user is taken to tabs.ts which holds my tabs code.

One of the tabs has a button in that logs users out:

user.ts:

  // Logout
  logout() {    
    // Log the user out
    this.user.logout();

    // Take user to login screen
    this.navCtrl.setRoot(LoginPage);
  }

I thought that setting the root to LoginPage, which isn't part of any tab page, would remove the tabs. Unfortunately not, and the tabs remain. This is really problematic for obvious reasons.

How can I remove the tabs from this point? I feel like I need to potentially grab the tabs instance and destroy it, but that's a guess and I'm struggling to find anything in the docs.

Please see reference link how I can solve issue. https://stackoverflow.com/questions/51249315/how-to-navigate-page-without-top-tabs-app-components-root — sameer, Jul 10 '18 at 13:06

score 7 · Accepted Answer · answered Aug 08 '17 at 14:21

After posting this I found the answer on the Ionic forums.

Effectively, each tab maintains its own navigation stack, which I was aware of but I expected the setRoot to bypass the stack. Logically, it does not.

Instead, you need to call getRootNav().setRoot() on your App.

App is imported from ionic-angular, and then passed to your controller.

A full (albeit truncated) example:

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

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

  constructor(
    private app: App
  ) {

  }

  // Logout
  logout() {
    // Take user to login screen
    this.app.getRootNav().setRoot(LoginPage);
  }

}

That's right, `this.app.getRootNav().setRoot(LoginPage);` is the proper way to do that. +1 :) — sebaferreras, Aug 08 '17 at 19:46

score 0 · Answer 2 · answered Aug 08 '17 at 14:20

0

You can use Angular router and navigate the user to login page once logout button is clicked.

this.router.navigate(["login"]).

Place proper routing guards so that user is not able to access the route if not logged in. https://angular.io/guide/router

answered Aug 08 '17 at 14:20

user3621573

96
1
1
7

Ionic uses a custom implementation of the router (NavController), so this answer wouldn't be right for Ionic. – sebaferreras Aug 08 '17 at 19:47

How can I set a root page outside of tabs that don't keep the tabs in place?

2 Answers2