How can I set the root page outside of tabs that do not contain tabs?
My app flow means there are no tabs in the tab until the user is logged in. The first page is the full screen login screen. After logging in, the user navigates to tabs.ts
which contains my tabs code.
In one of the tabs, there is a button that logs users:
user.ts:
// Logout
logout() {
// Log the user out
this.user.logout();
// Take user to login screen
this.navCtrl.setRoot(LoginPage);
}
I thought setting root to LoginPage
which is not part of any bookmark will remove the tabs. Unfortunately not, and the tabs remain. This is really problematic for obvious reasons.
How do I remove tabs from this point? I feel like I need to potentially grab the tabs instance and destroy it, but that's an assumption and I'm struggling to find anything in the docs.
source to share
After posting this question, I found the answer on the Ionic forums.
Effectively each tab maintains its own navigation stack, which I was aware of, but I expected to setRoot
bypass the stack. Logically, this is not the case.
Instead, you need to call getRootNav().setRoot()
on App
.
App
imported from ionic-angular
and then passed to your controller.
Complete (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);
}
}
source to share
You can use Angular router and go to the login page after clicking the logout button.
this.router.navigate(["login"]).
Install proper routing security devices to prevent the user from accessing the route if they are not logged in. https://angular.io/guide/router
source to share