How do redirect before page template is loaded?

Ionic Framework
1

The starting page for my app has 3 icons and a chart (drawn using chart.js). This page also does a redirect to the login page if a user object is not available in storage. I am having difficulty understanding the timing here as i have 2 different timing related problems.

  1. the icons and the chart (depending on how chart is displayed) are shown briefly before the page is redirected.

OR

  1. the empty div for the chart is not available when i go to embed my chart.

my latest code attempt looks like this:

ionViewWillEnter() {
    if (jDrupal.user.uid === '0' || jDrupal.user.uid === '0') {
      this.show = false;
      this.router.navigate(['user/login']);
    } else {
      this.show = true;
    }
  }

  ionViewDidEnter() {
    this.show = true;
    this.showChart();
  }

  showChart() {
    const canvas: any = document.getElementById('myChart');
    if (canvas === null) {
      return;
    }

    const ctx = canvas.getContext('2d');
    const myChart = new Chart(ctx, {... static chart data
}

the above seemed like an easy solution but clearly i do not understand the timing of this relative to the template being loaded.

The other approach i had tried was to set the value of “Show” and then use it in the template with *ngif to hide contents before switching. this way i only flash a blank page; but this also does not work.

Perhaps my flaw is how the redirect is being done?

2

Found my own answer here: https://codeburst.io/using-angular-route-guard-for-securing-routes-eabf5b86b4d1