Bdtjtk

I am new to ionic and jumped onto the beta Ionic 4 apologies if I ask the simplest question. I've implemented a simple login and I am storing the returned user object from my REST api using Ionic Storage like this (in user.service.ts):

var url = `${this.APIUrl}/api/Account/Get?email=${login.email}&password=${login.password}&apikey=${this.APIKey}`;



this.CurrentUser = await this.http.get<iUserModel>(url).toPromise();



// Store User Details

this.storage.set("CurrentUser", this.CurrentUser);

If I investigate in my browser I can see that it is stored under Indexed DB:

Now my challenge is to check if user is logged in on my home page. I've tried to use both the constructor and ngOnInit() but it seems my home.page.html is rendering before the call to go fetch user is complete and here is how I've done it (in home.page.ts):

export class HomePage implements OnInit 

{

  CurrentUser: any;



  constructor(private nav:NavController, private auth: UserService, private alertCtrl: AlertController, private loadingCtrl: LoadingController, private menuCtrl: MenuController) 

  {

    this.menuCtrl.enable(true);



    this.APIUrl = this.auth.APIUrl;

    this.CurrentUser = this.auth.CurrentUser; // This becomes undefined when page is refreshed whilst LIVE testing in the browser

  }



  ngOnInit() 

  {

    /*if (this.auth.GetUser() == undefined || (this.auth.GetUser() != undefined && this.auth.GetUser().Id <= 0))

    {

      this.nav.navigateBack("/login");

    }*/



    this.SetUser();

  }



  async SetUser()

  {

    await this.auth.GetUser();



    this.CurrentUser = this.auth.CurrentUser;

  }

 }

In user.service.ts:

async GetUser() 

{

    this.storage.get("CurrentUser").then( (user) =>

    {

      this.CurrentUser = user;

      console.log(user);

    });

}

My console.log(user) does indeed produce results, however when I try to access the CurrentUser that should now be set in my home.page.html

<ion-header>

  <ion-toolbar>

    <ion-buttons slot="start">

      <ion-menu-button></ion-menu-button>

    </ion-buttons>

    <ion-title>

      Sample Project

    </ion-title>

    <ion-avatar end>

      <img [alt]="CurrentUser.DisplayName" [src]="APIUrl + '' + CurrentUser.Selfie" />

    </ion-avatar>

  </ion-toolbar>

</ion-header>

it is always undefined. Can anyone please point out what step I am missing?

Thanks in advance...

As M4R1KU mentioned in the comment you can look at APP_INITIALIZER

But also I can suggest you one solution. I believe you have something like AppComponent (or just App) in your project (try looking at src/app folder)

And there you can do something like this:

constructor(private platform: Platform, private auth: UserService) {

    this.initializeApp();

}



initializeApp() {

    this.platform.ready().then(() => {

        this.auth.GetUser();

    });

}