在HTTP請求上添加驗證標頭 - Angular 4

我的Angular 4應用程序上有一個HttpInterceptor，它工作得很好。但有些事情我想在這裏實現，以及時可用注入一個JSON網絡令牌，但我還沒有發現這樣做的正確方法，請檢查下面的代碼：在HTTP請求上添加驗證標頭 - Angular 4

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獲得它的結果相同。

來源

2017-08-25 Multitut

這是我如何做到這一點：

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}` 
       } 
      }); 
     }); 

    } 

}

來源

2017-08-25 14:26:52 jlareau

謝謝！這是一個角4實現？它告訴我，我在類型'（）=> any'中缺少'url'。儘管如此，我在我的代碼中集成了setHeaders：{headerName]：'$ {authScheme} $ {token}' }，但仍然看不到通話中的令牌 – Multitut

我不知道您的警告。我的代碼幾乎是從Angular 4.3.5上的工作代碼複製粘貼的。你確定你的攔截器加載正確嗎？也許把一個console.log來檢查。 – jlareau

其他一切工作正常，我檢查了我的角度版本，它也是4.3.5。你能提供你的完整例子嗎？ – Multitut

在HTTP請求上添加驗證標頭 - Angular 4

回答

相關問題