Best way to check if a user is logged while the app is loading?

Hi,

My doubt is about how shoud be the best way to check if an user is logged or not while the app is loading and then go to home page or go to login page.

My app follows Lazy loading structure and side menu layout.

If I check this on app.component.ts like this


constructor(...){
this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      //GET IF TOKEN
      this.localStorage.getAccessToken().then(token => {
        if(!token){
          this.nav.setRoot('LoginPage')
          this.menuCtrl.swipeEnable(false);
        }
        else{
          this.nav.setRoot('HomePage')
          this.menuCtrl.swipeEnable(true);
        }
      })

    })
}

The problem is I need to declare as a provider the localStorage on app.module.ts and then this is loaded on app init and available for all other pages.

Then I not need to declare as a provider into the pageN.module and this I think is not appropiated on a lazy loading app.

What would be a best practice to do this logic into a lazy loading app?

Thanks

The problem is I need to declare as a provider the localStorage on app.module.ts and then this is loaded on app init and available for all other pages.

Then I not need to declare as a provider into the pageN.module and this I think is not appropiated on a lazy loading app.

This is fine. What you are doing should be ok

But on a Lazy loading app, The services should be declared only on the pages that needs that service. If I declare it into a app.module the service is imported for all pages no?

“Imported” isn’t really the issue, but yes and I second not worrying about it and doing it the way you are. Lazy loading is about how much time it takes to interpret a bunch of JavaScript, and a single presumably relatively small service provider won’t cost that much. It also will very likely be useful to have it available for other pages.

Then, this services are loaded in memory during the init, no? Really are stored on the phone memory no?
This services not are necessary to be declared into other modules, no?

You say that “imported” are not the problem? Wich are?

Thanks for your time?

Yes. It is necessary for the app to function, though.

The way webpack’s code splitting works (which is what Ionic’s lazy loading essentially boils down to) is that there is one “common chunk” and then separate chunks for each lazily loaded page. The common chunk includes things such as the Angular and Ionic framework code. It will also include your storage provider. Things in the common chunk are available to all parts of the application.

“Importing” is a compile-time construct that tells the build system what code needs what other code in order to be able to function. Once we get to runtime, the concept of “importing” doesn’t meaningfully exist any more. As far as app startup time is concerned (the primary motivation for dealing with the snake pit that is lazy page loading), what matters is how much time the webview needs to expend interpreting various bits of JavaScript. Again, though, if your storage service provider is typical, I expect you will see no discernable effect on startup time having it in the app module and therefore in the common chunk.

My problem is also “import” other services like a service dedicated to show messages like toast, alerts… And also the service dedicated to api calls because when user clicks on an option it try to check into server if user is allowed to navigate to a page or other…

Any option to do this out of app.componente.ts?

I suppose so, but I have not yet found any that I consider better than doing it in the app component.