http - Angular2 需要异步获取的结果以允许访问路由

Question

我使用 AuthGuard 来保护我的路由，确保用户在看到应用程序的仪表板之前正确登录。

授权 guard :

canActivate(
    next:  ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ) {
    // return true;
    return this.userService.getValidLoginCheck();
}

但是 getValidLoginCheck() 不返回 bool 值:

getValidLoginCheck(): boolean {
    let headers = new Headers();

    let options = new RequestOptions({ headers: headers });

    headers.append('authorization', this.getToken());

    this.http.get(this.baseUrl + 'api/auth/checkToken', options)
      .map(res => res.json())
      .subscribe(data => {return data.message === 'valid token' });

  }

我知道为什么会这样，但是我怎样才能让 getValid... 函数等待 http.get 完成，这样我才能正确地保护我的路由？

Answer 1

CanActivate 方法接受 3 种类型的响应(Observable、Promise 和 boolean)，这里是方法的签名:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean;

因此，您可以利用 Observable 响应并将您的服务的 Observable 变成这样的 Observable:

canActivate(
    next:  ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ) {

       return new Observable<boolean>((observer: Observer<boolean>) => {
         this.userService.getValidLoginCheck()
         .subscribe(data => {observer.next(data.message === 'valid token')},
          error => { console.log("error while calling getValidLoginCheck" ); observer.next(false)});
         observer.complete();
       });
}

您应该从您的服务中返回一个可观察对象:

getValidLoginCheck(): Observable<Response> {
    let headers = new Headers();

    let options = new RequestOptions({ headers: headers });

    headers.append('authorization', this.getToken());

    return this.http.get(this.baseUrl + 'api/auth/checkToken', options)
      .map(res => res.json());
  }

这就是我所做的，它对我有用，我更喜欢在订阅内调用一个方法并发送观察者和 http 响应，然后在隔离方法内评估响应，但这是我个人的偏好，我希望如此有帮助。