How to make deep links wait


#1

I’m using AngularFire and lazy loading.

I’ve set up a deep-linked page with an auth guard (ionViewCanEnter) that checks the user’s auth state. It works fine when I start from the top page, but when I start from the deep link it always returns false because the page component is loaded before the Firebase authorization has a chance to finish its request.

How can I make Ionic wait before trying to navigate its deep links?


#2

Okay, I got it to work. Hopefully someone who actually knows stuff about things will come along and see this code and be disgusted enough to tell me what the correct way to achieve this behavior is.

  private clearSubscription(){
    this.subscription.unsubscribe();
  }

  ionViewCanEnter(): Promise<any> {
    return new Promise((resolve, reject) => {
      if(this.afAuth.auth.currentUser){
        // The user already exists (is logged in), so resolve directly.
        resolve();
        return;
      }
      // Prevent user interaction while we're waiting for the response
      let loader = this.loadingController.create({
        spinner : 'crescent'
      });
      loader.present();
      // Otherwise, subscribe to the authState and wait for a state update
      this.subscription = this.afAuth.authState.subscribe(user => {
        if(user){
          resolve();
        } else {
          reject();
        }
        loader.dismiss();
        this.clearSubscription();
      });
    });
  }

#4

First, ionViewCanEnter load the DOM before checking, so it’s poor performances and security.
Ionic 4 let us use Angular Guards, which have better method to achieve this.

Then, You are not obliged to create a promise when your auth service return a Promise. So the code will be cleaner this way.

Please move to Ionic 4 to see the magic happend.


#5

So is there no other way to solve this issue in Ionice 3?

I’ve split each page/component into it’s own module and it works ok if I go to http://localhost:8080 but if I try to type in the link to a page directly e.g http://localhost:8080/tasks then the constructor for the TasksPage is called before my services (such as AuthService) are even loaded - why is this and how can we fix it, is it an Ionic bug?


#6

It is not an Ionic bug, ionViewCanEnter as its name say, is checked before entering but not before loading causing security issues… please move to Ionic 4


#7

I am not talking about ionViewCanEnter, I am talking about why if I go directly to a IonicPage() URL e.g. /tasks, that it loads the TasksPage constructor before all my services have loaded, do you know why it is loading before?

Also Ionic 4 is still alpha and I’m not sure it’s working stable at all yet.


#8

constructor is it here for this ^^ Called before everything.


#9

You could add an event listener on your page:

if(this.AuthService.authenticated()){
   console.log("Authorized - now perform your functions");
}else{
   this.events.subscribe('auth:authenticated', (options) => {
      console.log("Authorized - now perform your functions");
   });
}

And in your auth service;
this.events.publish('auth:authenticated', { });