处理 Angular Router Guard 的多个 Observable

Question

我是 RxJS 的新手，但似乎符合我的需求。

我想知道是否可以检索一个监听两个BehaviorSubject的Observable 。

首先我使用 Angular 10 ！

我在用

• 调用我的组件的服务创建 promise 以检索用户数据
• 特定路线上的警卫，也使用先前的服务来确定访问权限。

为了更好地理解这里是我的配置：

// 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
  }
}

我的目标是在以下条件下回答AuthGuard ：

• 如果isLoading为真 -> 等待
• 如果isLoading为 false 且userOk为 true -> true
• 如果isLoading为 false 并且userOk为 false -> 执行其他操作

怎样才能做到这一点？ 谢谢大家！

Answer 1

尝试利用combineLatest 、 filter和map 。

您可能希望以true而不是false开始isLoading$ 。

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;
      }
   })
  );
}