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副本，並且根模塊中提供的攔截器可能會被覆蓋