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

Ionic Framework Ionic Angular
8

Sure, long answer is…

canActivate will fire when ever a route is about to be come “active” this could me forward navigation or back navigation. canActivate just wants to answer the question "should this route be allowed to be navigated to.

canLoad is slightly different, instead, it will try determine if a lazy loaded route’s module can loaded at all. Meaning if the module is loaded once, it will only ever run once, since those are cached in memory.

So think of it like this:

canLoad: I want to control if this whole feature/lazy loaded module should be loaded, including childRoutes declared in it

canActivate: Doesn’t matter when and where I am, should this navigation be allowed or blocked.

Most of the time, you’ll want canLoad, but if you really need to use or have to use canActivate, remember that the class for the guard is stateful, so you can make notes in there.

export class DummyGuardService implements CanActivate, CanLoad {
  didActivateAlready = false;

  canActivate(route: ActivatedRouteSnapshot): boolean {
    console.log('has been activated before: ',this.didActivateAlready)

    if (!this.didActivateAlready) {
      // some sort of logic needed....
      this.didActivateAlready = true;
    }
    return true;
  }
}

This way, any setup logic needed will only be done once.

1 Like