HTTPリクエストに認証ヘッダーを追加する - 角度4

Question

私のAngular 4アプリケーションにHttpInterceptorがあり、かなりうまくいきました。しかし、私はここにも達成したい何かが利用可能な場合JSONウェブトークンを注入することであるが、私はそれを行うには正しい方法を発見していない、以下のコードを確認してください。

import {Injectable} from '@angular/core'; 
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse} from '@angular/common/http'; 
import {Observable} from "rxjs"; 
import {ToasterService} from "angular2-toaster"; 
import 'rxjs/add/operator/do'; 

@Injectable() 
export class GobaeInterceptor implements HttpInterceptor { 
    constructor(private toasterService: ToasterService){ 
    } 
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
     next.handle(req).subscribe(event => { 
       if (event instanceof HttpResponse) { 
        if (localStorage.getItem('Token')) { 
         //THIS ISN'T WORKING: 
         event.headers.append('authentication', `${localStorage.getItem('Token')}`); 
        } 
        let response = event.body; 
        if(response.Error){ 
         this.toasterService.pop('error', 'Error '+response.Code, response.Message); 
        } 
       } 
      }, error => {console.log(error)}); 
     return next.handle(req); 
    } 
} 

それは上昇しませんどんなエラーでもそれはそれを設定しません（私はネットワークタブで要求をチェックしました）。また、同じ結果を持つlocalStorageから取得する代わりに、ハードコードされた文字列を渡そうとしました。ここで

Answer 1

は、私はそれを行う方法です。

export class JWTInterceptor implements HttpInterceptor { 

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 

     let headerName: string = 'Authorization'; 

     let authScheme: string = 'Bearer '; 

     let token: string = localStorage.getItem('Token'); 

     return next.handle(() => { 
      return request.clone({ 
       setHeaders: { 
        [headerName]: `${authScheme}${token}` 
       } 
      }); 
     }); 

    } 

}