Góc 4.3 Bộ chặn không hoạt động

Question

Tôi cố gắng sử dụng các bộ chặn đánh chặn Angular 4.3 mới để đặt tiêu đề tác giả cho tất cả các yêu cầu. Tuy nhiên, nó không hoạt động. Tôi đặt breakpoint vào interceptors intercept phương pháp và trình duyệt không đánh nó, vì vậy nó có vẻ như angular chỉ bỏ qua interceptor của tôi. Xin hãy giúp tôi, cảm ơn trước.

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

Lý do - bạn sử dụng cũ Http dịch vụ thay vì sử dụng dịch vụ mới, được giới thiệu trong Angular 4.3 - HttpClient (Http đang hoạt động ing không được chấp nhận). Ngoài ra, trong loại phản hồi JSON HttpClient được giả định theo mặc định, vì vậy bạn nên ommit .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 Hãy chắc chắn rằng đó là một trong nhập khẩu của HttpClientModule trong toàn bộ ứng dụng (recommened) hoặc cung cấp cấu hình đánh chặn hợp lệ cho mỗi một (ofc chỉ cho thử nghiệm).

Đảm bảo rằng HttpClientModule không được nhập nhiều lần trên các mô-đun khác nhau của ứng dụng. Tôi đã có nó nhập khẩu trong các mô-đun nạp lười biếng. Mỗi lần nhập sẽ tạo một bản sao mới của HttpClient bằng cách sử dụng cấu hình từ mô-đun mà nó được nhập vào, vì vậy các bộ chặn được cung cấp trong một mô-đun gốc sẽ bị ghi đè.