CODEWITHSUNDEEP
angularangular2-routing
Sloloem
Sloloem

Reputation: 1616

Angular2 pass data from CanActivate guard to Resolve resolver?

I have a situation where I've been using a Resolve to pre-load some data from a remote source via an HTTP call prior to navigating to a component. Now I need to implement some guard logic which requires that, depending on some conditions, that data be pre-loaded to verify some fields on it against the current user.

I'd like to avoid making the exact same request to the backend in the CanActivate guard and then immediately afterwards in the Resolve.

Is there some way I can access the route data from inside the CanActivate or the route config to temporarily override the resolver and just set the value on the data object since I've got what I'm about to request?

I tried getting away with something as simple as

route.data['myData'] = value;

But this is an error because "object is not extensible".

I also tried something like:

this.router.routerState.root.data['myData'] = value;

Which didn't create any errors, however the data hadn't survived into the route.data element of the Resolve.resolve() method.

I'd like to avoid something too custom or hacky like temporarily storing the object on the Service like some sort of cache. Is there any standard mechanism for transferring data between internal router elements to support advanced pre-fetching and stuff like data ownership checks?

EDIT The routerState does work if you inject the Router into the constructor of the Resolve class, and access it the same way. But this needs to be cleared afterwards otherwise it does persist between navigation calls.

Upvotes: 20

Views: 4243

Answers (1)

Noémi Salaün
Noémi Salaün

Reputation: 5036

The property data of an ActivatedRouteSnapshot is immutable, this is the reason why you receive the error:

object is not extensible

But you can replace the whole object, like that:

@Injectable()
export class MyGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    // Use the spread operator to keep the previously resolved data
    next.data = {...next.data, guardedData: 'guarded'};
    return true;
  }
}

And access it in your resolver

@Injectable()
export class FooResolver implements Resolve<any> {

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    return route.data.guardedData;
  }

}

Upvotes: 15

Related Questions