javascript - 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 令牌添加到请求中，没有一些隐藏的魔法，因此非常欢迎任何线索。

标签： javascriptangular

Answer 1

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