Question

我正在开发一个有角度的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，但看不到我的错误。

也许有些人对我有暗示？

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

Answer 1

您显示的内容很好

console.log("Sending"); //here you print to the cosole
return this.httpClient // here you actually MAKE http call.
  .get<T[]>(absoluteUrl);

因此，在执行请求之前和发出实际XHR请求之前，将您的拦截器称为。

Answer 2

请尝试这样

local cache disable

Answer 3

我有同样的问题。

拦截器已添加到CoreModule的提供程序中。当我将其添加到进行调用的FeatureModule的提供程序中时，它按预期运行。

这当然不是很方便，但是因为我只有一个FeatureModule，所以对我来说还是有用的

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

3 个答案: