I'm new to RxJS but seems to fit my needs.
I am wondering if it's possible to retrieve an
Observable
that listen twoBehaviorSubject
.
First I use Angular 10 !
I am using
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:
isLoading
is true -> waitisLoading
is false and userOk
true -> trueisLoading
is false and userOk
false -> do something elseHow can achieve this ? Thanks all !
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;
}
})
);
}