Ionic - flashes with wrong starting page on app start

user_3461985 0
Viewed 124

Ive created 2 route guards... one which checks if the user is logged in and one if they are unauthenticated

When the app starts, very briefly it determines, while looking for the localstorage cookie, that the user doest exist and so shows the unauth page (i.e login page)

Im wondering what is the best approach to solve this - in my eyes the authguard with observale to see if the user is logged in or not was the best approach but there is that split second while the code runs that it cannot determine and it wants to show something.

Anyone have any similar issues/creative solutions to solve it.

ionic3 ionic4 ionic-framework
1 Answers

I had this same issue a few months ago, and I solved it by creating an Auth Guard and returning a promise...

auth.guard.ts

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot,
  ): Observable<boolean> | Promise<boolean> | boolean {
    return new Promise(resolve => {
      const userAuthObs = this.afAuth.user.subscribe(user => {
        if (user) {
          resolve(true);
        } else {
          this.router.navigate(['signup']);
          resolve(false);
        }
      });
    });
  }

The app just continues to load normally while it waits for this promise to decide where to direct the user.

You can watch a great video about creating auth guards here... https://www.youtube.com/watch?v=RxLI9_ub6PM

user_45074470
Related