Angular :HttpInterceptor 没有捕捉到每个请求

Question

我编写了一个 HttpInterceptor(Angular 4.3.6)来捕获所有请求并操作一些头字段。我的问题是它没有捕捉到每个请求。可能是什么问题呢？

这是我的拦截器:

import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HTTP_INTERCEPTORS} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {


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

        console.log('AuthInterceptor at work: ', req.url );

        const contentTypeReq = req.clone({
            headers: req.headers.set('Content-Type', 'application/json')
        });

        const token  = localStorage.getItem('token');
        if (token) {
            const authReq = contentTypeReq.clone({
                headers: req.headers.set('Authorization', 'Bearer ' + token)
            });
            return next.handle(authReq);
        }

        //debug - lazy loading
        //contentTypeReq.headers.keys()

        return next.handle(contentTypeReq);
    }
}


export const AuthInterceptorProvider = {
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true,
};

这里有一个未被捕获的请求:

...
login(username: string, password: string): Observable<boolean> {

        return this.http.post(environment.baseUrl + '/api/authenticate', JSON.stringify({ username: username, password: password }))
            .map((response: Response) => {
...

也许我对我的第二个拦截器有一些干扰，应该重定向 401 错误:

import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/empty';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/finally';
import {
    HTTP_INTERCEPTORS, HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor,
HttpRequest
} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {Router} from '@angular/router';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {

    constructor(private router: Router) {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log('Error interceptor at work: ', req.url);

        return next.handle(req)
            .do(event => {
                console.log('error interceptor in success', event);
            })
            .catch(err => {
                console.log('error interceptor in error', err);
                if (err instanceof HttpErrorResponse && err.status === 401) {

                    if (err.url !== '/login') {
                        console.log('redirecting to login...');
                        this.router.navigate(['/login']);
                    }
                }
                return Observable.throw(err);
                // or return Observable.empty();
            })
            .finally(() => {
                console.log('error finally');
            });
    }
}


export const ErrorInterceptorProvider = {
    provide: HTTP_INTERCEPTORS,
    useClass: ErrorInterceptor,
    multi: true,
};

这是我如何将它们集成到我的 app.module 中:

  providers: [
    AuthGuard,
    AuthenticationService,
    UserService,
    MockBackend,
    BaseRequestOptions,
    GoogleAnalyticsEventsService,
    ErrorInterceptorProvider,
    AuthInterceptorProvider
  ]

Answer 1

我认为问题实际上出在您导入的 HttpClientModule 上.

在此处查看我的完整答案:HTTP_INTERCEPTORS only in AppModule