Guards with NavigationExtras -> state and ion-back-button

Hi!

I played around with navigation in Ionic based on this content:

With an Angular Guard I can prevent/enable page activation. Lets say I would like to prevent/enable navigation based on Id, i can choose between the following scenarios:

• Navigation happens with route parameter

  this.router.navigate(['inside/list/details', this.myid]);
  

  Inside canActivate i check if the id is there or not, like this:

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const selectedId = route.paramMap.get('id');
    console.log(selectedId) // Print out myid
    ...
  }
  

• Navigation happens with queryParams

  let navigationExtras: NavigationExtras = {
    queryParams: {
      id: this.myid
    },
    queryParamsHandling: 'merge'
  };
  this.router.navigate(['inside/list/details'], navigationExtras);
  

  Inside canActivate i check if the id is there or not, like this:

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const selectedId = route.queryParams.id;
    console.log(selectedId) // Print out myid
    ...
  }
  

• Navigation happens with extras

  let navigationExtras: NavigationExtras = {
    state: {
      id: this.myid
    }
  };
  this.router.navigateByUrl('inside/list/details', navigationExtras);
  

  Inside canActivate i check if the id is there or not, like this:

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const currentNavigation = this.router.getCurrentNavigation(); //Requires 'private router: Router' in the constructor
    const selectedId = currentNavigation.extras.state.id;
    console.log(selectedId) // Print out myId
    ...
  }
  

However, if i navigate from this page to an another one, and from there i navigate back to the details page using <ion-back-button defaultHref="inside"></ion-back-button>, the guard will run again.
There is no problem with that in case of route parameter or queryParams but if prevoiusly i used extras, then the guard will fail. In every case the data is there where it should be but if i used NavigationExtras state to transfer the id before, then i can not get it from anywhere.

I’m trying to get the data in a wrong way or backward navigation with ionic-back-button has some issue with extras?
Many thanks in advance!!

1 post - 1 participant

Read full topic