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