Angular async guard canActivate() function

Question

I'm having a bit of trouble because when implementing guards, I have the following (pseudocode):

canActivate(
  route, state, etc....{
    checkStatus()

    if(status){
      result = false
      etc
    }
)

The problem is that checkStatus() is asynchronous, but I need the result in order to decide wether return true or false to the guard. I've been looking to similar questions and the answer usually is to use Promises, but I still don't know how to use those within this canActivate() function. Any help please?

Thanks.

UPDATE:

I discovered that since the checkStatus() function is async and treated as a promise, I can just use checkStatus().then(status and if and everything).

Thanks a lot either way.

score 1 · Answer 1 · answered Dec 30 '20 at 18:36

1

If you take a look at the API for canActivate (https://angular.io/api/router/CanActivate), you will see that the function may return a Promise<boolean> or an Observable<boolean> in addition to a regular boolean.

For example, using a promise:

canActivate(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): Promise<boolean> {
  return new Promise( async (resolve, reject) => {
    // do something
    resolve(true);
} );

Or with an observable:

canActivate(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): Observable<boolean> {
  // do something
  return someObservable$.pipe(
    map( () => true)
  );
}

answered Dec 30 '20 at 18:36

Celsiuss

895
7
19

The problem is that in "//do something" I would need to call the checkStatus() and aftwerwards use status, which would'nt have been updated because checkStatus() wouldn't have finished. – Moises Pantion Loza Dec 30 '20 at 18:41
does checkStatus() return a promise? Then you can just do something like `const status = await checkStatus()` – Celsiuss Dec 30 '20 at 18:45
Seems like it, it returns a Promise so I can just use checkStatus().then() – Moises Pantion Loza Dec 30 '20 at 18:50

Betafoenix · Answer 2 · 2020-12-30T18:41:39.447

0

You can use rxjs operators in canActivate() function. e.g 'from' operator can be used to get observable from promise.

canActivate() {
  return from(checkStatus); // checkStatus should return promise<boolean> in this case
}

edited Dec 30 '20 at 18:41

answered Dec 30 '20 at 18:29

Betafoenix

1
3

import { from } from 'rxjs'; In canActivate function... return from('async function returning promise'); – Betafoenix Dec 30 '20 at 18:34

Angular async guard canActivate() function

2 Answers2