ionic-framework: NavGuards with ionoic-angular 3.5.0 has a breaking change

Ionic version: (check one with “x”) [ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [x] 3.x

I’m submitting a … (check one with “x”) [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: We are testing your nightly lazy loading implementation which by the way works much better, a big thx to Dan. 👍 On our IonPage's we use the ionViewCanEnter livecycle to check if user can access the Page, if not we will redirect them to a FORBIDDEN PAGE.

This is our simple example, nothing magically

@IonicPage({
    priority: 'off'
})
@Component({
    selector: 'pageForwardToPage4',
    templateUrl: 'pageForwardToPage4.html'
})
export class PageForwardToPage4 {


    constructor(public navCtrl: NavController) {
        console.log('PageForwardToPage4#constructor');
    }


    ionViewCanEnter(): Promise<any> {
        console.log('PageForwardToPage4#ionViewCanEnter');

        return new Promise((resolve, reject) => {
                this.navCtrl.setRoot('Page4');

                console.log('PageForwardToPage4#ionViewCanEnter DO NOT ENTER');
                
                
                // THIS DOES WORK page is redirct to Page4
                resolve();


                // THIS DOES NOT WORK, page is will NOT be redirect to Page4 and remain on the same page
                // reject()
        }); 
    }

}

Anytime we get into PageForwardToPage4 we will redirect user to Page4 which should be our ForbiddenPage (this are only dummy names) 😄

Expected behavior: In older version we used before we reject the promise for the guard, and the redirection was always working. Now if we reject the promise the setRoot doesn’t work, so we have to resolve the promise, so user theoretically can access page and will be redirect in the same moment to new page.

So IMO there are three possibilities:

  1. this is a bug and should not by design.
  2. there is a better way redirect user to forbidden page and also guarantee user can not access the page
  3. this is by design, but IMO it’s a little bit confusing and as wrote I think this behavior changed after refactoring lazy loading, but this would be a breaking change

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.8
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.4.2-201706271925

System:

    Node       : v6.11.0
    OS         : Linux 4.10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.0.4 

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 30 (21 by maintainers)

Most upvoted comments

All the problems with navigation in Ionic are really frustrating. We are on the edge of abandoning Ionic framework entirely because of the constant problems with navigation/routing 😭

@kensodemann As in ionic4 you removed ionViewCanEnter and ionViewCanLeave and anther the hood you are using the angular router, I think now we should use default angular guards, with default router redirection. Is my guess right? If yes, I assume this ISSUE is obsolete.

If you like tomorrow I can test if the behavior explained in this issue using the new nav system and guard system, is resolved and in this case the issue would be obsolete.

BTW: do you think you can add some examples for guards, redirect and user login/logout behavior on ionic-conference sample app? The app does not show this best practice for doing this.

thx

Some help or workaround on this breaking change?

Okay, this breaking change would not be a problem for us, but we think this is not so beautiful. There should be the possibility to redirect user to other page if guard blocking, but if for doing this we have to resolve the promise, so this someone could be see also as a security issue. IMO thx

@mburger81 - we have a list of high priority / high impact issues to look at when we plan our releases and that this issue is on that list. There are a lot of navigation and lifecycle event related items on there. I can’t say if this will make it into the next round or not, but I have it marked as something to discuss when we have our next planning meeting, which will be next Froday.

One of the problems doing something like this:

this.navCtrl.push(SecondPage).catch(err => {
   REDIRECT TO LOGIN PAGE
});

this is working great for APP MENU but it does not work for DEEP LINKING / URLS like webapps and I think also not on PWA’s

Yesterday Mike told me we have to do the redirection on pushing the page like this:

this.nav.setRoot(pageName)
              .then((permission) => {
                  if (!permission) {
                      this.nav.setRoot('LoginPage');
                  }
              });

This is working but only a part of the solutions, what if you go direct in the browser to the link, you’ll never redirect to the LoginPage, but I think this is a possible scenario, we have and probably also others.