Handle multiple Observables for Angular Router Guard

Question

I'm new to RxJS but seems to fit my needs.

I am wondering if it's possible to retrieve an Observable that listen two BehaviorSubject.

First I use Angular 10 !

I am using

• a service called on my components that call on create a promise to retrieve user data
• a guard on specific routes that use also the previous service to determine access.

To understand better here is my config:

// auth.guard.ts
import { Injectable } from '@angular/core';
import {... } from '@angular/router';
import { from, Observable, Subscription } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate, CanLoad, CanActivateChild {
  constructor(private auth: AuthService) { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> {
    return from(this.auth.canActivate());
  }
}

//app-routing.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SecuredComponent } from './pages/secured/secured.component';
import { AuthGuard } from './auth.guard';


const routes: Routes = [
  // other paths
  {
    path: 'mes-formations',
    component: SecuredComponent,
    canActivate: [AuthGuard]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

//auth.service.ts
import { Injectable, OnDestroy } from '@angular/core';
import { BehaviorSubject} from 'rxjs';
import { UrlTree } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthService implements OnDestroy {
  private userOk$ = new BehaviorSubject(false);
  private isLoading$ = new BehaviorSubject(false);

  constructor(args) {
    this.authenticate();
  }

  async authenticate(): Promise<boolean | UrlTree> {
    // set isLoading$ to true till user request ends
    // fetch user and set userOk$ to true if succeed
  }

  async canActivate(): Observable<boolean | UrlTree> {
    // return true if isLoading is false AND userOk$ true
    // instead redirect outside app
  }
}

My goal is to give an answer to AuthGuard as these conditions:

• if isLoading is true -> wait
• if isLoading is false and userOk true -> true
• if isLoading is false and userOk false -> do something else

How can achieve this ? Thanks all !

Answer 1

Try taking advantage of combineLatest, filter, and map.

You may want to start isLoading$ with true instead of false.

canActivate(): Observable<boolean> {
  return combineLatest([
    this.isLoading$,
    this.userOk$,
  ]).pipe(
    filter(([isLoading, userOk]) => !isLoading), // wait until isLoading is false (filter emissions while isLoading is true)
    map(([isLoading, userOk) => {
      if (userOk) {  // isLoading is false and userOk is true
        return true;
      } else { // isLoading is false and userOk is false
        // do something else (do whatever else you want to do and return false)
        return false;
      }
   })
  );
}