路由防護中的API調用：Angular 4

Question

我有一個名為“ orderDetails”的組件，並且我試圖添加一個路徑防護，僅在下訂單時才渲染該組件，即：

status = 'PLACED'

我嘗試做類似的事情：

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

import { OrderService } from './order.service';    

@Injectable()
export class RouteGuard implements CanActivate {

  orderId = 12345;  // mock id

  constructor(private router: Router, private orderService: OrderService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     this.orderService.getOrderDetails(this.orderId).subscribe(data) => {
       if (data.status !== 'PLACED') { return false; } else { return true; }
     }
  }

}

但是，這種方法似乎不起作用，可能是因為我正在canActivate方法中進行API調用。 是否有另一種方法來實現這一目標？

Answer 1

由於必須返回一個Observable ，因此不應該訂閱方法getOrderDetails而是映射：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.orderService.getOrderDetails(this.orderId).map((data) => {
       return data.status === 'PLACED';
    }).catch(error => {
        return Observable.of(false);
    });
}