从多个 Observable<boolean> - Angular 5 路由守卫中获取结果

Question

In Angular 5 我正在使用两个服务调用来查看是否应该允许用户查看该页面，这是使用 Route guard。但是对于 RXJS，我不确定处理这个问题的最佳方法。

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
import { SponsorService } from '../sponsor.service';
import Rxjs = require("rxjs");
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';
import { Subscription } from 'rxjs';

@Injectable()
export class SponsorGuard implements CanActivate {

  constructor(
    private readonly auth: AuthService,
    private readonly sponsorService: SponsorService,
    private readonly router: Router) {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

   // console.log(this.isSponsor());
    //console.log(this.isValidSponsor(route));

   // return true;

    if (this.isSponsor() && this.isValidSponsor(route)) {
      return true;
    };
    return false;
  };

//  canGoToSponsorPage() : Subscription {
//    const isSponsorObservable = this.isSponsor();
//    const isValidSponsorRecordObservable = this.isValidSponsor();
//    const arrayOfRequests = [isSponsorObservable, isValidSponsorRecordObservable];
//
//      return Observable.forkJoin(arrayOfRequests).subscribe(results => {
//
//        const result = (results[0] && results[1]);
//      });
//  }

  isSponsor(): Observable<boolean> {

    return this.auth.isSponsor().map(isSponsor => {

      if (!isSponsor) {
        console.log("getting redirected");

        this.router.navigateByUrl('home');
        return false;
      }

      console.log("access granted");
      return true;
    });
  }

  isValidSponsor(route: ActivatedRouteSnapshot) : Observable<boolean> {

    const sponsorId = Number(route.params["sponsorId"]);
    const applicationId = Number(route.params["applicationId"]);

    console.log(sponsorId);
    console.log(applicationId);

    return this.sponsorService.getSponsorDetails(sponsorId, applicationId).map(validSponsorRecord => {

      console.log(validSponsorRecord);

      if (!validSponsorRecord) {
        console.log("getting redirected");
        return false;
      }

      console.log("access granted");
      return true;
    });
  };
};

我正在使用两个 return Observable 的辅助方法，我想将它们链接在一起，看看这两个 observable 的结果是否为真。

目前我正在这样做：

    if (this.isSponsor() && this.isValidSponsor(route)) {
      return true;
    };
    return false;
  };

我认为这是检查对象是否不为空，而不是检查服务调用的结果 return 是真还是假。

有什么处理方法的建议吗？

Answer 1

Observable 中的值是未来的。它被包裹在里面。您不能直接访问它。要实现它，你必须使用 rxjs 运算符来操作输出

对于这种情况，您必须等待两个 Observables 返回结果 forkJoin。 canActivate 方法可以接受 Observable 输出。所以代码将是：

import { forkJoin } from 'rxjs';

...
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {

  return forkJoin(this.isSponsor(), this.isValidSponsor(route)).pipe(
    map(([a, b]) => a && b)
  );
};

从多个 Observable<boolean> - Angular 5 路由守卫中获取结果

Get result from multiple Observable<boolean> - Angular 5 route guard

subscribe

observable

rxjs

angular