How to evaluate multiple observables in canActive guard?

Question

I have this guard that is evaluating multiples observables, but in the verifyMoviesStore observable is having issues, this is a selector from NgRx, the problem with this one, is that is updating the data serveral times, this gap of time, is causing that route is arriving in a blank page, I think this is beacuse the guard determines that is no valid route, when I provide a fast response from the selector this providing the right page. The guard is not waiting for the true value.

verifyMoviesInStore(): Observable<boolean> {
    this.loadMoviesWithFlag(); 
   // dispath an action and triggers the effect to retrieve the data

   return selectMoviesWithFlag().pipe(
      filter((movies) => movies.length > 0 && movies.flag), 
      map() => true)
   )
}


 canActivate(): Observable<boolean> | boolean {
    return this.verifyCreateToken().pipe(
      switchMap(() => this.verifyGate()),
      switchMap(() => this.verifyToken()),
      switchMap(() => this.verifyMoviesInStore()),
      switchMap(() => this.verifyTerms()),
      first(),
      catchError(error => {
        throw error;
      })
    );
  }

score 0 · Answer 1 · answered Aug 25 '22 at 17:13

Use ForkJoin to evaluate all the observables at once, it will complete when all the observables in the array are complete!

verifyMoviesInStore(): Observable<boolean> {
    this.loadMoviesWithFlag(); 
   // dispath an action and triggers the effect to retrieve the data

   return selectMoviesWithFlag().pipe(
      filter((movies) => movies.length > 0 && movies.flag), 
      map() => true)
   )
}


 canActivate(): Observable<boolean> | boolean {
    return this.ensureToken().pipe(
      forkJoin([
          this.verifyGate(), 
          this.verifyToken(), 
          this.verifyMoviesInStore(), 
          this.verifyTerms()
      ]),
      catchError(error => {
        throw error;
      })
    );
  }

How to evaluate multiple observables in canActive guard?

1 Answers1