我正在开发一个有角度的6应用程序,我想在每个请求的authorize-header中添加一个jwt-token。对于这种情况,我想使用拦截器。
代码如下:
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let sessionId = localStorage.getItem('sessionId');
if (sessionId) {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${sessionId}`
}
});
console.log("With AuthHeader");
}
return next.handle(request);
}
}
这是我发送请求的代码:
httpQuery(ressource): Observable<T[]> {
var absoluteUrl = this.getAbsoluteUrl(ressource);
console.log("Sending");
return this.httpClient
.get<T[]>(absoluteUrl);
}
但是我遇到以下问题: 拦截器被触发,但是在请求发送之后。我可以在开发人员控制台中看到这一点,其中来自http方法的日志消息恰好来自拦截器的日志消息:
如您所见,这导致来自服务器的401响应,该响应需要授权标头。
我阅读了很多有关拦截器的教程和stackoverflow-questions,但看不到我的错误。
也许有些人对我有暗示?
感谢您和最诚挚的问候, 亚历克斯
答案 0 :(得分:0)
您显示的内容很好
console.log("Sending"); //here you print to the cosole
return this.httpClient // here you actually MAKE http call.
.get<T[]>(absoluteUrl);
因此,在执行请求之前和发出实际XHR请求之前,将您的拦截器称为。
答案 1 :(得分:0)
请尝试这样
local cache disable
答案 2 :(得分:0)
我有同样的问题。
拦截器已添加到CoreModule的提供程序中。 当我将其添加到进行调用的FeatureModule的提供程序中时,它按预期运行。
这当然不是很方便,但是因为我只有一个FeatureModule,所以对我来说还是有用的