Angular 4.3攔截器不工作

Question

我嘗試使用新的Angular 4.3攔截器爲所有請求設置授權標頭。但是，它不起作用。我設置了攔截器intercept方法和瀏覽器沒有擊中它的斷點，所以它似乎像angular只是忽略我的攔截器。請提前幫助，幫助我。

user.service.ts：

import {Injectable} from '@angular/core'; 
import 'rxjs/add/operator/map'; 
import {Observable} from "rxjs"; 
import {Http} from "@angular/http"; 

@Injectable() 
export class UserService { 

    constructor(public http: Http) { 
    } 

    public getContacts(): Observable<any[]> { 
    return this.http.get('/users/contacts').map(contacts => contacts.json()); 
    } 
} 

token.interceptor.ts

import {Injectable} from '@angular/core'; 
import { 
    HttpRequest, 
    HttpHandler, 
    HttpEvent, 
    HttpInterceptor 
} from '@angular/common/http'; 
import {Observable} from 'rxjs/Observable'; 
import {AuthService} from "./shared/auth.service"; 

@Injectable() 
export class TokenInterceptor implements HttpInterceptor { 
    constructor(public auth: AuthService) { 
    } 

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

    request = request.clone({ 
     setHeaders: { 
     Authorization: `Bearer ${this.auth.getToken()}` 
     } 
    }); 
    return next.handle(request); 
    } 
} 

app.module.ts：

@NgModule({ 
    ... 
    providers: [ 
    ... 
    {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true} 
    ] 
}) 

Answer 1

的原因 - 你用舊Http服務而不是新的服務，推出Angular 4.3 - HttpClient（Http是去將被棄用）。此外，在HttpClient默認情況下會採用JSON響應類型，因此您應該省略.map(contacts => contacts.json())。

app.module.ts

... 
import { HttpClientModule } from '@angular/common/http'; 

@NgModule({ 
imports: [ 
    HttpClientModule, 
    ... 
], 
providers: [ 
    ... 
    {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true} 
] 
... 
}) 

user.service.ts

... 
import {HttpClient} from "@angular/common/http"; 

@Injectable() 
export class UserService { 

    constructor(public http: HttpClient) { 
    } 

    public getContacts(): Observable<any[]> { 
    return this.http.get('/users/contacts'); 
    } 
} 

Answer 2

TL; DR 請確保在整個應用程序的HttpClientModule的一個進口（recommened）或爲每一個提供有效的攔截器配置（ofc僅用於測試）。

確保HttpClientModule不會跨應用程序的不同模塊導入多次。我有它在懶惰加載模塊導入。每個導入都會使用來自導入模塊的配置創建HttpClient的新副本，因此根模塊中提供的攔截器將被覆蓋。