Question

我需要检查te后端的身份验证状态，但te代码在完成可观察的返回之前完成。这将导致一个unifined。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    this.isAuthenticated();        
    return this.authenticated; 
}

isAuthenticated(){
    this.loginService.isAuthenticated()
        .subscribe(status => this.authenticated = status)
}

我如何更改此代码，以便等待observable完成以在代码返回之前获得经过身份验证的状态。

注意：Angular canActivate方法不允许我编写代码，如下所示：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    this.loginService.isAuthenticated()
        .subscribe(status => {
            this.authenticated = status;
            return this.authenticated;
        });
}

这导致以下错误：

Class＆＃39; AuthGuard＆＃39;错误地实现界面＆＃39; CanActivate＆＃39;。
财产类型可以激活＆＃39;是不相容的。键入＆＃39;（路由：ActivatedRouteSnapshot，状态：RouterStateSnapshot）=＆gt;空隙＆＃39;不能分配类型＆＃39;（route：ActivatedRouteSnapshot，state：RouterStateSnapshot）=＆gt;布尔值|可观察的|镨...＆＃39 ;. 键入＆＃39; void＆＃39;不能赋值为＆＃39; boolean |可观察的|无极＆＃39;

对此错误的解决方案的建议也会有所帮助。

Answer 1

解决了async / await和promise

的问题

LoginService首先导入toPromise：

import 'rxjs/add/operator/toPromise';

然后在LoginService中创建了一个异步方法

  async isAuthenticated(){
     const response = await this.http.get('/login/authenticated').toPromise();
     return response.json();
  }

然后在组件中：

async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    this.loginStatus = await this.loginService.isAuthenticated();

    console.log("LOGGED IN STATUS: " + this.loginStatus);

    if (this.loginStatus == true){
        return true;
    }

    // not logged in so redirect to login page with the return url
    this.router.navigate(['/layout/login'], { queryParams: { returnUrl: state.url } });    
}

Answer 2

您可以将观察结果返回为Observable<boolean>

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.loginService.isAuthenticated()
        .map(status => {
            console.log(status);
            this.authenticated = status;
            return true;
        }).catch((err) => {
            console.log(err);
            return Observable.of(false);
        });
}

Angular 2+等待方法/ observable完成

2 个答案: