Angular 2のcanActivateへのAPIコールの追加AuthGuard

Question

Angular 2アプリケーションのルートに対してAuthGuardを設定する作業を進めています。各ルートには、そのルートに行くことができる異なるユーザーグループがあります。フロントエンドでは、ベアラトークンのみを格納していますので、canActivateが呼び出されたときにAPIを呼び出し、トークンとルートを送信して、そのユーザーがそのルートにアクセスできるかどうかをAPIに通知させ、 trueを返し、そうでない場合はfalseを返します。フロントエンドでは、その呼び出しの結果を使用してルーティングするか、ログイン画面に戻すだけです。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
    this.authService.authenticateRouteForUser(state.url).subscribe(active => { 
     if (active) { 
      return true; 
     } 

     this.authService.redirectUrl = state.url; 
     this.router.navigate(['/login-page']) 
     return false; 
    }) 
} 

私はこのようにそれをテストしているので、サブスクライブ作品内のロジック（これは基本的にGoogleが角度のドキュメントから右に取られる）：

この

は、私はそれを達成しようとしています方法です

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean{ 
    console.log('AuthGuard#canActivate called') 
    if(this.authService.isLoggedIn){ 
     return true; 
    } 

    this.authService.redirectUrl = state.url; 

    this.router.navigate(['/login-page']) 
    return false; 
} 

私の最初の声明の問題は、canActivateがtrueまたはfalseを返す必要があり、サブスクライブ内で真または偽しか返さないということです。問題は、ルート認証が行われた後にtrueまたはfalseを返すことだけです。APIへの呼び出しが必要です。私はこのすべてに間違っているのだろうか？私はログイン時にユーザーの役割を返すだけで、フロントエンドで各ルートの役割を保存する必要がありますので、コールせずに確認できますか？私が行方不明になっているこのアプローチには他の方法がありますか？

Answer 1

サーバが期限切れになり、いくつかの役割を持つトークンを返すと仮定します。あなたはあなたのガードでこれらをチェックする必要があります。そのため、単にあなたのローカルストレージまたはセッションストレージに保存してください。サーバコールごとにトークンを提供する必要があります。だから、誰かがローカルストレージを改ざんすると、あなたのサーバはエラーを出すべきです。こうすることで、ユーザーは使用してはいけないルートにユーザーがハッキングする可能性がありますが、サーバーは単にトークンが無効であるためデータを返さないだけです。