Ionic 4: Clean / Reset tabs pages when user info changes


I need your help to solve next issue.

I have an Ionic 4 Angular app with 5 tabs. The first 4 tabs contains different features, all based on logged user information. Each of these tabs has several variables and gets data from REST APIs.

Inside the last tab it is possible to log out the current user and log in with a new one.

Now, if I navigate to the first 4 tabs and to any of their child pages before change the user, every time I re-visit these tabs, pages are already loaded (they don’t call ngOnInit function) because that’s how Tabs component works, right? And that’s OK, it seems good to me.

But… when I change the user in 5th tab I would like to reset all other tabs, including their navigation history.

Just now I’m thinking of a solution/workaround that involves calling the ionViewDidEnter function of the first 4 tabs pages in order to re-request REST API and define variables as null / 0 and protect their child pages with an Angular Guard but I also think it’s not a good solution because each page has many variables and guards could affect other features that I already have.

So, do you know any more optimal way to get this desired behavior, writing as few lines of code as possible?


What I would do is to have each tab page subscribe to an Observable exposed by some sort of service that tracks the logged-in user. I always call this AuthService in my apps. The 5th tab can call a method in AuthService that causes that Observable to emit, saying “hey, we have a new user”. Each of the other four pages can react to that happening as appropriate.

Did you find a way to reset the navigation history of the tabs?