角度2+メソッド/観測が完了するまで待ちます

Question

認証ステータスを確認する必要がありますが、観測可能な復帰が完了する前にteコードは完了しています。その結果、不潔なものになるでしょう。私は、コードが戻る前に認証ステータスを取得するために完了するために、観察を待つので、私はこのコードを変更する方法を

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

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

。

注：以下に示すように角度canActivate方法は私がコードを記述することはできません：

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

これはfollowinエラーが生じる：

Class 'AuthGuard' incorrectly implements interface 'CanActivate'.
Types of property 'canActivate' are incompatible. Type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => void' is not assignable to type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | Observable | Pr...'. Type 'void' is not assignable to type 'boolean | Observable | Promise'.

このための解決策のために提案エラーも役に立ちます。

Answer 1

として、観察を返すことができ

LoginService最初のインポートtoPromise：

import 'rxjs/add/operator/toPromise'; 

はその後に非同期メソッドを作成しましたログインサービス

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); 
     }); 
}