路由防护中的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);
    });
}