发送请求后调用角度6拦截器

时间:2018-11-20 13:31:49

标签: angular interceptor angular-http-interceptors

我正在开发一个有角度的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方法的日志消息恰好来自拦截器的日志消息: enter image description here

如您所见,这导致来自服务器的401响应,该响应需要授权标头。

我阅读了很多有关拦截器的教程和stackoverflow-questions,但看不到我的错误。

也许有些人对我有暗示?

感谢您和最诚挚的问候, 亚历克斯

3 个答案:

答案 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,所以对我来说还是有用的