How to define the initial page

Ionic Framework ionic-v3
1

I have an application that when the user opens it, I check if it is already logged in. If so, it is redirected to HomePage, if not, it goes to LoginPage.

Where is the best place to do this verification and redirection? Currently I call LoginPage from the root page and check there whether the user is logged in or not. The problem is that every time I open the application, the LoginPage page is displayed (it takes a while to check if the user is logged on to the server)

2

This is a pretty common problem; I solved it by using an “Initial” screen (the very first [root]) that looks exactly like my splash screen. It shows that while the app is deciding which screen to go to, and then it just makes the change.

This avoids odd situations where you blink on one screen then change to another.

Typically I only see this extra screen for a fraction of a second, but that’s only because I know to look for it; otherwise the experience is seamless.

1 Like
3

You code to do this is in AppComponent? In my AppComponent I have a variable rootPage: any = LoginPage;. You suggest that I verify what is the page here and before atribute the variable rootpage?

4

Have you thought about using Ionic guards (e.g., ionViewCanEnter)?

See:

1 Like
5

Hi @jordaos yes, in AppComponent. Basically, define the rootPage member variable as:

rootPage = YourSplashPage;

Then, you have to have some kind of notification - event, observable, callback, promise - that notifies you when you KNOW whether you are logged in or not. So as a really basic example:

constructor(private authService: YourAuthService) {
  this.authService.checkLogin().then(() => {
    if (this.authService.isLoggedIn) {
      this.rootPage = HomePage;
    } else {
      this.rootPage = LoginPage;
    }
  })
}

If your auth check is not asynchronous it’s even easier, although of course in that case this entire issue doesn’t exist :slight_smile:

1 Like