Multiple instance of the page on log in

Ionic Framework ionic-v3
1

I have a log in page. on success i am pushing to a tabs page that i get when i start my project my using tabs.(ionic start myApp tabs).

There is a logout page in one of the tabs, when i click it i need to go to the login page and start my app as new.

Below are the codes that i am using to navigate

login.ts

this.navCtrl.push(TabsPage);

tabs.html

<ion-tabs>
	<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
	<ion-tab [root]="tab2Root" tabTitle="Settings" tabIcon="settings"></ion-tab>
	<ion-tab [root]="tab3Root" tabTitle="Logout" tabIcon="power"></ion-tab>
</ion-tabs>

logout.ts

private app:App

this.app.getRootNav().setRoot(LoginPage);

My problem is ,

on logout the page is directed back to the login page alright.
But when i log in again i get two home pages, stacked twice,

and then i logout again and then log back in, the pile of pages increased to three.
And it increases further. How do i solve this?

2

Hello,

NavController is a stack. Each time you push a page you put this page on the stack.
You can remove pages with using pop or remove see doc.

Best regards, anna-liebt

3

Use setRoot(‘TabsPage’) and also use setRoot when you log out to switch back to the login page.

4

My root page is not the tabs page but the loginpage

on successful log in it is pushed into the tabspage

5

Yes I understand that. But to solve your problem you shoud use the navCtr.setRoot function to switch to the tabs page.