Route guard on the Ionic possible?

Question

I am currently securing my routes in ngOnInit, if you have the token key in localStorage, then it remains on the Home route (My root route is home). Otherwise, it redirects to the login screen. The problem is that it has a delay, the Home screen is shown for a few milliseconds and then switch to the Login screen.

I have tried in the constructor/ngOnInit and also in the appcomponen.ts once the platform is ready, but this way I keep having a "blink" on the screen.

Does anyone have a solution to this?

Answer 1

[EDITED] - I did it in Ionic 3 for Voce. Do it in your app.componentts.

I’m using Ionic 4, in my file app-routing.module.ts I use in Route Guard to check if the user has any information saved in the Path location, if I redirect to the home or if I don’t have it I send it to login. Follow the logic.

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav, ToastController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { SharedData } from '../providers/shared-data';
import { ClientStorage } from '../database/client-storage';

@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    @ViewChild(Nav) nav: Nav;
    rootPage: any;

    constructor(
        public platform: Platform,
        public statusBar: StatusBar,
        public splashScreen: SplashScreen,
        public sharedData: SharedData,
        private clientStorage: ClientStorage,
    ) {
            this.clientStorage.buscaRealizada.then(() => {
                statusBar.styleDefault();
                splashScreen.hide();
                if (this.clientStorage.data.UserId)
                    this.rootPage = 'HomePage';
                else
                    this.rootPage = 'LoginPage';
            });
        });
    }
}

Answer 2

Yes, there is another better solution. You can read us Lifecycle Events in documentation IONIC. In your case, you can use the ionViewCanEnter. Before the page is created, it will check its logic. If the user has access, his logic returns true and creates the page to be accessed, if it does not return false.

See this tutorial

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-a',
  templateUrl: 'a.html'
})
export class PageA{

  constructor(public navCtrl: NavController) {}

  ionViewCanEnter() {
    \\sua logica aqui. retorne true ou false.
  }
}