Change app root after sign in

Ionic Framework ionic-v3
1

Hello,

I’m trying to achieve a solution for having two root pages, that can change while using the app.

The first root page is called ‘Authentication’, it has a split-pane with a logo on the left side and the content on the right side(signIn, signUp, forgotPassword). On app start I check for a valid user, when there is no valid user the ‘AuthenticationPage’ is set as root.

The second root page is called ‘Main’, it also has a split-pane, but this time with a menu on the left side and content on the right. In the menu, there’s a signOut. On app start, when a valid user is available, ‘MainPage’ is set as root.

I’m encountering two problems with this structure. On a successful login attempt, I want to change the root to ‘MainPage’. It looks like this works okay: this.appCtrl.getRootNav().setRoot('MainPage'); However, the content of my ‘MainPage’ is still the content from my SignInPage. When I print a console log of ‘navCtrl’, it also states the rootPage is still ‘AuthenticationPage’. When reloading my app, my rootpage sets to ‘MainPage’, and everything works fine. This must be because the app.component.ts sets the rootpage to ‘MainPage’.

The second problem is very alike, when I’m in my MainPage and I sign out, I still get the content of the current page instead of the ‘SignInPage’.

Is there any way to replace the rootPage of the app? Or is this just a bad practice? If so, what would be a solution for my problem, having different split panes for different states? Any advice is welcome anyways. Thanks in advance :slight_smile:

2

Did you try using navCtrl.setRoot() instead of appCtrl?

Worst case scenario, check for user in every page (I’m guessing you’re using Storage to store authentication information.)

3

Thnx for the reply. navCtrl.setRoot() would just set the root page for a sub page, since I’m using ViewChild in the ‘MainPage’ and ‘AuthenticationPage’.

I found a work around using only ‘MainPage’, showing menu when user is logged in and showing logo when user is not logged in. This is working fine, however I would still like to completely separate the authentication part of the app from the other pages.

4

Typically, one’s app component controller has a property called something like rootPage. How about reassigning that instead of calling nav.anything()?

5

Yep it has a rootPage, but I don’t know how I can change this rootpage when the app is already running. Do you know how I can achieve this?

6

this.rootPage = OtherPage;

…or this.rootPage = "OtherPage"; if you’re doing the lazy loading business.

7

Yeah I’m using lazy loading. The problem is, I have to set root for app component from a view child of a page. I don’t know how to access app component to change the rootpage when app is running.

8

@raym0nd - quick mod to something i had hanging around, this might get you headed in the right direction

1 Like
9

I think about this differently. It’s not about accessing the app component, it’s about declaring that application state has changed, and caring about that in the app component.