Angular2 - ロールベースのAuthGuard

Question

私の目標は、AuthGuardを実装して、ユーザーが自分の役割と要求されたルートに基づいて特定のルートにアクセスできるかどうかをチェックし、ルートに適切な役割を果たす場合、そうでない場合は別の場所にリダイレクトしてください。

AuthGuardはObservable（UserRole）を返すAuthorizationServiceを呼び出します。私は、ユーザーの観測可能性を評価し、canActivateに値を返すのが難しいです。確かにRxJS Observablesの私の未経験さに関係していますが、私はこれを過ぎているようには見えません。

は私がauth.guard.service.ts

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {   

     let url: string = state.url; 

     var currentUser$ = this.authService.getCurrentUser(); 

     currentUser$.subscribe((currentUser: MyUser) => {  

      if (currentUser.isInternalUser && url === '/internal') { 
       console.debug("Internal User! Yes"); 
       this.router.navigate(['/internal']); 
       return true; 
      } else if (currentUser.isExternalUser && url === '/dashboard') { 
       console.debug("External User! Yes");      
       this.router.navigate(['/external']); 
       return true; 
      } else { 
       console.debug("Access Denied..."); 
       this.router.navigate(['/pagenotfound']); 
       return false; 
      } 
     }); 

     //return Observable.of(false); // I need to return something, but this is not what I want to return!! 

    } 

auth.service.ts

getCurrentUser() : Observable<MyUser> { 

     let currentUser$: Observable<MyUser>; 

     currentUser$ = this.http.get(this.location.prepareExternalUrl('api/v1/userprofile/')) 
      .cache()  
      .map(this.extractData) 
      .catch(this.handleError); 

     console.log("AuthService#getCurrentUser being called."); 

     return currentUser$; 
    } 

がどのように私はあるCurrentUserを評価し、ブール値を返すcanActivateを持つことができますがあります観察できる？

Answer 1

あなたが購読する前にObservableを返す必要があります。サブスクリプションはObservableに接続されていることを通知するターミナル操作であり、サブスクライバにイベントをプッシュすることができます（サブスクライブ関数に渡すハンドラによって表されます）。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot 
): Observable<boolean> { 
    const url: string = state.url; 
    return this.authService.getCurrentUser() 
    .flatMap(({isInternalUser, isExternalUser}: MyUser) => { 
     if (isInternalUser && url === '/internal') { 
     return Observable.fromPromise(this.router.navigate(['/internal'])) 
      .mapTo(true); 
     } else if (isExternalUser && url === '/dashboard') { 
     return Observable.fromPromise(this.router.navigate(['/external'])) 
      .mapTo(true); 
     } else { 
     return Observable.fromPromise(this.router.navigate(['/pagenotfound'])) 
      .mapTo(false); 
     } 
    });   
} 

上記は、あなたが提供したコードの純粋なリファクタリングです。私はAngular2について十分に知りませんが、実際にAuth Guardを実装する方法があるかどうかを教えてください（のチェックだけが外見上はリダイレクトされるのはちょっと奇妙に思えますがそのページにアクセスできるのはです）。

また、cacheはRxJS 5の最終リリースから削除されているため、アップグレードする場合は使用しないでください。