路由保护中的 API 调用：Angular 4答案

【问题标题】：API call in route guard: Angular 4路由保护中的 API 调用：Angular 4
【发布时间】：2018-02-20 01:47:45
【问题描述】：

我有一个名为“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 调用。是否有另一种方法来实现这一点？

【问题讨论】：

你需要返回一个结果布尔值的 observable；目前您只是在本地订阅并且不返回任何内容。你读过吗？ angular.io/guide/router#milestone-5-route-guards?

标签： angular

【解决方案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);
    });
}

【讨论】：