Angular 4アプリにトークンを渡すうまい方法は何でしょうか？

Question

私は実装を次ています

フロントエンド：localhostを：4200（これは角アプリです）

バックエンド：localhostを：3000（これはNode.jsの& Expressで実行している私のREST APIです）

- ユーザーが自分のREST APに彼をリダイレクトするリンクをクリックした角度アプリで

ステップ1. I（localhost：3000/auth/steam）。

ステップ2.私のREST APIは、彼がログインするOpenIDプロバイダ（スチーム）に彼をリダイレクトします。ログインが成功で

ステップ3. OpenIDプロバイダが一緒に戻って私のバックエンドサーバーにユーザーをリダイレクトしますユーザデータと比較する。私のバックエンドサーバーはこのデータをDBに保存し、ユーザーデータを含むJWT（JSON Webトークン）を作成します。トークンと一緒にフロントエンドにユーザーをリダイレクト

ステップ4 ...

これは私が実際にこれを行うにはエレガントな方法がどうなるか分からない部分です。トークンをURLパラメータ（？token = ...）として渡すことを考えましたが、トークンがURLに表示されるため、これは少し危険です。

もっと良い方法がありますか？ありがとう:)

Answer 1

Http Headersで送信するのが最善の方法だと思います。 これを行う最善の方法は、httpリクエストにHttpClientModuleを使用することです。

providers: [ 
 
     ... 
 
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true } 
 
] 
 

 
export class AuthInterceptor implements HttpInterceptor { 
 
    constructor(private authService: AuthService) {} 
 
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
 
     const copy = req.clone({headers: req.headers.set('Authorization', this.authService.getToken())}); 
 
     return next.handle(copy); 
 
    } 
 
}