Event subscription issue when using NavController's getAcitve() to get name of current view


#1

Hello Ionic Community,

This is the third time I am trying to port our app from ionic1 to ionic’s latest version. The reason it has been deferred twice before is the lack of flexibility in monitoring navigational events. While trying to find a work-around, I thought I had found a solution to aforementioned impediments, but I seem to have run into a problem yet again.

A brief summary of the why and what:

Disclaimer
My approach to the whole thing might be way off and considered bad practice. I am open to better ways but online searches for a better approach has been a fruitless endeavor. If you think you can see a better way of achieving the required functionality, please feel free to tell me what it is. Thanks in advance.

The Why:
Certain pages on the app have very heavy API calls and redirecting to and from them needlessly really causes the performance of the app to suffer. So restricting unnecessary navigation is a must for us. While this could be done individually for each page using ionViewCanEnter, it seems rather silly when the views can broadly be divided into two categories: pages that require the user to be logged and pages that require the user to not be logged in.

To have the same block of code on each page inside a ionViewCanEnter is not only hard to manage if changes are to be made at a later date, but also a big no-no from the OOP standpoint. The requirement is simple - if the user is logged off, the pages that require the user to be logged on should be completely inaccessible and vice versa.

The What:
After languishing for almost a year now with trying to reduce our technical debt by porting the app from v1 to the latest version, I thought I finally found the solution - using the events API to do what the NavController couldn’t.

The call that is made on every view

ionViewCanEnter():Boolean{
    return this.access.change();
}

The service that is called inside each ionViewCanEnter

public change() {
    return this.events.publish('navigation')[0];
}

The subscription in app.conmponents.js

 events.subscribe('navigation', () => {
    let authenticated = this.authService.authenticated();
    let currentPage = this.navCtrl.getActive()['component']['name'];

    if(this.pages['unauth'].indexOf(currentPage) > -1){
        if(authenticated){
            this.navCtrl.setRoot('Landing');
            return false;
        }else{
            return true;
        }
    }else{
        if(authenticated){
            return true;
        }else{
            this.navCtrl.setRoot('Dashboard');
            return false;
        }
    }
}

The problem

let currentPage = this.navCtrl.getActive()['component']['name'];

Anything after the getActive call seems to not fire. Tried using console.log(currentPage) right after it but nothing happens.

I am not very familiar with type script or with subscriptions, so maybe I’m missing something very basic. So any help would be much appreciated.