サブスクリプション付き角4+ガード

Question

私のシナリオでは、ルートがアクティブになっているときに、Windowsユーザーを認証/ログインすることができます。だから、私は単純にユーザーが黙認されているかどうかを検証し、そうでなければトークンを生成するようにサーバーを呼び出し、canActivate（）にtrueを返すことを期待して、おそらく期待どおりに動作しません。コードの

作品：

auth.guard.ts

import { Observable } from 'rxjs/Observable'; 
import { CanActivate, Router, ActivatedRouteSnapshot } from '@angular/router'; 
import { Injectable } from '@angular/core'; 
import { AuthService } from './../data/auth.service'; 
import { TokenService } from '../auth/token.service'; 
import { of } from 'rxjs/observable/of'; 

@Injectable() 
export class AuthGuard implements CanActivate { 

    constructor(
     private loginService: AuthService, 
     private tokenService: TokenService, 
     private router: Router) {   
    } 

    canActivate(route: ActivatedRouteSnapshot): Observable<boolean> { 
     const operation = route.data.operation; 

     if (!this.tokenService.isAuthenticated() && !this.login()) {    
      console.log('canActive1: ', false); 
      return of(false); 
     } 

     console.log('canActive: ', true); 
     return of(true); 
    }  

    login() { 
     this.loginService.getToken().subscribe((user) => { 
      console.log('token returned..'); 
      if (user && user.token) { 
       this.tokenService.storeToken(user.token); 
       return true; 
      } 
      return false; 
     }); 
    } 
} 

コンソール：

• canActivate1：​​返された偽
• トークン..

Answer 1

login()メソッドの結果は返されません。代わりにこれを試してください。

Answer 2

これは非同期なので、コンソールログは後で表示されます。それ以外に、問題はあなたが購読からデータを返そうとしていることです。これは不可能です。 Observableを返す必要があります。

canActivate(route: ActivatedRouteSnapshot): Observable<boolean> { 
    const operation = route.data.operation; 

    return this.login().map(bool => { 
     if(!bool && !this.tokenService.isAuthenticated()) { 
     return false; 
     } 
     return true; 
     } 
    }) 
}  

login() { 
    // use map instead! 
    return this.loginService.getToken().map((user) => { 
    console.log('token returned..'); 
    if (user && user.token) { 
     this.tokenService.storeToken(user.token); 
     return true; 
    } 
    return false; 
    }); 
} 

Answer 3

まず、あなたは他の人が正しく述べてきたように、login() : Observable<booleanを使用してログイン（）関数の結果を返す必要があります。

第2に、私が理解できる問題は、この行にあります。 -
if (!this.tokenService.isAuthenticated() && !this.login())。

tokenService.isAuthenticated（）を呼び出すときに、ユーザーがトークンを持っているかどうかを確認する必要があります。

トークンを持っていない人は、this.tokenService.isAuthenticated()がfalseを返すので、あなたが適用したAND条件のfalse beacuseも返すでしょう。ログイン（）関数を呼び出す

は、トークンを設定しますが、それまで自分のtokenServiceisAuthenticated（）関数は、falseが返されただろうとルートが