Angular5添加JWT令牌

Question

我制作了如下的拦截器类：

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor() { }
    //
    intercept(req: HttpRequest<any>,
              next: HttpHandler): Observable<HttpEvent<any>> {
        const idToken = localStorage.getItem("token");
        console.log('daniel3');
        if (idToken) {
            let cloned = req.clone({
                setHeaders: {
                    Authorization: `Bearer ${idToken}`
                }
            });
            console.log('daniel4');
            return next.handle(cloned);
        }
        else {
            console.log('daniel5');
            return next.handle(req);
        }
    }
}

但这奇怪的是只能一次性使用，这意味着向请求添加jwt令牌，没有任何隐藏的魔法，因此非常欢迎任何线索。

Answer 1

该应用程序只能导入一次HttpClientModule。 每次导入都会创建一个新的HttpClient副本，并且根模块中提供的拦截器可能会被覆盖