How to wait for guards in Angular

Question

If i specify three guards on a route, it seems as though all guards are evaluated immediately.

{path: '', component: OptionsComponent, canActivate: [ GuardOne, GuardTwo, GuardThree]}

The problem I have is I don't want GuardTwo to run until GuardOne has finished. Is there any way to achieve this?

Duplicate of https://stackoverflow.com/questions/40589878/multiple-canactivate-guards-all-run-when-first-fails ? — Striped, Jun 09 '17 at 14:50
@maddockst I was wondering on what forced you into needing to load your guard synchronously? Could you elaborate? — Z. Bagley, Jun 10 '17 at 13:56
@Z.Bagley I'm using children routes and wanted to use a guard for all of those children. — Thomas Maddocks, Jun 10 '17 at 13:59
@Maximus haven't had chance to use it yet, will update once I do — Thomas Maddocks, Jun 11 '17 at 07:52
Does this answer your question? [Execute Multiple Asynchronous Route Guards in Order](https://stackoverflow.com/questions/44641092/execute-multiple-asynchronous-route-guards-in-order) — Dzinx, Dec 19 '22 at 11:42

Max Koretskyi · Accepted Answer · 2017-06-09T20:10:55.647

14

I don't think that's possible in the 4.1.3. Here is the code that runs the guards:

  private runCanActivate(future: ActivatedRouteSnapshot): Observable<boolean> {
    const canActivate = future._routeConfig ? future._routeConfig.canActivate : null;
    if (!canActivate || canActivate.length === 0) return of (true);
    const obs = map.call(from(canActivate), (c: any) => {
      const guard = this.getToken(c, future);
      let observable: Observable<boolean>;
      if (guard.canActivate) {
        observable = wrapIntoObservable(guard.canActivate(future, this.future));
      } else {
        observable = wrapIntoObservable(guard(future, this.future));
      }
      return first.call(observable);
    });
    return andObservables(obs);
  }

This simplified piece:

// array of all guards
canActivate.map((guard)=>{
     observable = guard.canActivate()
})

runs all guards in a sequence without waiting for the previous to finish.

One possible solution would be to have one service that implements CanActivate and combines other guards:

class Combined {
  constructor(private gA: GuardA, private gB: GuardB) {}

  canActivate(r, s) {
        return gA.canActivate(r, s).then(()=>{ return gB.canActivate() });
  }
}

... 
{path: '', component: OptionsComponent, canActivate: [ Combined ]}

edited Jun 09 '17 at 20:10

answered Jun 09 '17 at 16:05

Max Koretskyi

101,079
60
333
488

So would it be possible to build them synchronously in a separately service, then map in that service that synchronously builds them? – Z. Bagley Jun 09 '17 at 17:01
Solid answer, but do you know when this type of situation is needed? – Z. Bagley Jun 09 '17 at 21:09
what do you mean? since you asked the question you probably have such situation :) – Max Koretskyi Jun 10 '17 at 03:55
I didn't ask, I was working through an answer for OP when your answer came up and was just curious :) – Z. Bagley Jun 10 '17 at 13:42
@Z.Bagley, ah, I see, sorry. Let's ask the OP :) – Max Koretskyi Jun 10 '17 at 13:45
@Z.Bagley, In my case , I have a common guard to fetch/validate the token and other guards to check authorization in specific modules only . Is this a valid situation to use these ? – Sachin Feb 28 '18 at 23:54
@Sachin Yep yep, this more or less just creates the promise definitions in one file to chain in (rather than building parts of promise chains inside individual guards). Pretty elegant tbh for making clean `canActivate` definitions – Z. Bagley Mar 01 '18 at 01:06

How to wait for guards in Angular

1 Answers1

Linked