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的新副本，因此根模块中提供的拦截器将被覆盖。