Question

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

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

此刻我正在这样做：

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

我认为这是在检查对象是否不为null，而不是服务调用的结果返回true或false。

任何建议如何处理？

Answer 1

Observable中的值是将来的值。它包裹在里面。您不能直接访问它。为此，您必须使用rxjs运算符来操纵输出

在这种情况下，您必须等待两个Observables都返回forkJoin的结果。 canActivate方法可以接受可观察的输出。因此代码将是：

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路由防护

1 个答案: