Angular 5認証

Question

私はjwtベアラトークン（Works）を送るAngularと.Netコアの認証プロセスを理解しようとしています。ですから、私の問題は、ユーザーを（後でロールを使って）適切に管理するために、ガードと認証サービスで何をすべきか分かりません。しかし、私はいくつかのものを試して、今私は私のAuthServiceで何をすべきか分からない。

EDIT ログイン投稿後にサーバーからトークンと有効期限が取得されます。だから私はそれらを保存したいし、後でまたクレームだがidk how。私は何を返すべきですか？トークンが、どのようにその観察可能な場合はブール値を返すのであれば、今私がチェックする方法がわからない

@Injectable() 
export class AuthService { 

isLoggedIn = false; 

    constructor(private http: HttpClient) {} 

login(email:string, password:string) :Observable<boolean>{ 
    this.http.post('/login', {email, password}) 
    .subscribe(data => 
    { 
     //TODO: check for Token ??? 
     let userAuth = data; 
     if(userAuth) { 
      localStorage.setItem('currentUser', JSON.stringify(userAuth)); 
      return true; 
     }else{ 
      return false; 
     } 
    }, 
    (err: HttpErrorResponse) => { 
     if(err.error instanceof Error){ 
     console.log("error client side"); 
     }else{ 
     console.log("Server side error."); 
     } 
    }); 
    //what should i return ????? and how 
    } 

logout() { 
    localStorage.removeItem('currentUser'); 
} 
} 

：

これは私のAuthServiceがどのように見えるかです。また、ログイン後に今後の調査を確認するために重要なことは何ですか？

@Injectable() 
export class AuthGuardService implements CanActivate{ 

constructor(private router:Router) { } 

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

if(localStorage.getItem('currentUser')){ 
    return true; 
} 

this.router.navigate(['auth/login'], 
    {queryParams: { returnUrl: state.url}}); 

} 

} 

Answer 1

ちょうど私の発言やアイデア：

とM AuthGuardは次のようになります。

個人的に私はログイン方法でこれを行います。これはObservableを実際に返します。注：ログインコンポーネントで購読する必要があります。

login(email:string, password:string) :Observable<boolean>{ 
    return this.http.post('/login', {email, password}) 
    .map(data => { 
     let userAuth = data; 
     if(userAuth) { 
     localStorage.setItem('currentUser', JSON.stringify(userAuth)); 
     return true; 
     }else{ 
     return false; 
     } 
    } 
} 

ここであなたのガードについてです。あなたは確かに非常に週です。あなたはそれが有効かどうかを確認する要求をすることができますが、これは非常に遅いアプリケーションになります。私の意見では、トークンがフロントエンドで有効かどうかを単に確認するほうがよい。これは、バックエンドサービスがすべての要求に対してトークンをチェックすることを前提としています。フロントエンドのすべてを変更できるため、フロントエンドでこれを処理する節約方法はありません。繰り返しますが、あなたのバックエンドが過度の要求に対してトークンをチェックしていることを確認してください。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> { 
    if(localStorage.getItem('currentUser') && 
    JSON.parse(localStorage.getItem('currentUser')).expireTime < new Date().getTimeInMillis()){ //You need to have the expire value in your token. 
     return true; 
    } 

    this.router.navigate(['auth/login'], {queryParams: { returnUrl: state.url}}); 
}