标签: angular-http-interceptors

设置：

我有一个 Web 组件（Angular 10）正在 Angular 10 应用程序中使用。Web 组件对 Web API 进行 Httpclient 调用，以获取一些数据来填充菜单下拉列表。该 Web 组件是使用 Angular 10 制作 Web 组件的标准方法制作的。

Web 组件通过主客户端应用程序中的脚本加载。这是来自父应用程序的 angular.json 文件。

1."scripts":
 [
    "projects/web-component-test/src/assets/plugin.bundle.js"
 ]

一切正常，除了我们收到 401 错误（未经授权），因为端点要求用户登录。通过正常工作，还有其他控件可以根据需要显示下拉列表，它从 API 获取数据呼叫不会被填充。

流程：

1. 用户访问网站，然后提示登录（使用 keycloak Auth）。
2. 应用程序加载正常，但 Web 组件尝试加载菜单项时出现 401 错误除外。

来自父应用程序的 Http 调用工作正常；jwt 令牌将添加到标头中以调用受保护的 API。来自子 Web 组件的调用在标头中没有 jwt 令牌，因此会失败并出现 401 错误。

httpinterceptor：我们在主客户端应用程序（Web 控件的父级）上有一个 httpinterceptor 。从主应用程序发出的 Http 调用将通过拦截器进行路由，如果需要，令牌将附加到标头。

从子 Web 组件发出的调用不会触发父应用程序中的拦截器？

问题： 如何从子 Web 组件路由通过父级中的 http 拦截器进行调用，以便可以添加令牌。

我尝试过的事情：如果我这样做，我可以让网络组件正常工作：

1. 当父级加载时，我将令牌存储在本地存储中
2. 在 Web 组件上使用 http 拦截器，从本地存储中检索令牌并使用它。

** …

我有一个用例，我需要限制传出 http 请求的数量。是的，我确实在服务器端有速率限制器，但前端也需要限制活动 http 请求的数量。因此，我正在尝试实现一个滑动窗口协议，在任何时候我都会只有 n 个活跃请求。

这种使用 Rxjs 的方法通常工作得很好，请参见此处： https: //jsbin.com/pacicubeci/1/edit ?js,console,output

但我不清楚如何对 http 拦截器使用相同的逻辑。我的以下尝试在编译时失败，并出现以下错误：

“Subscription”类型缺少“Observable<HttpEvent>”类型中的以下属性：_isScalar、source、operator、lift 以及其他 114 个属性。(2740)

这样，我怎样才能返回一个可观察对象并同时在http拦截器中维护一个队列？我的方法有缺陷吗？我可以使用 http 拦截器来限制 http 速率吗？

@Injectable()
export class I1 implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const modified = req.clone({ setHeaders: { "Custom-Header-1": "1" } });

    return next
      .handle(req)
      .do((ev: HttpEvent<any>) => {
        if (ev instanceof HttpResponse) {
          console.log(ev);
        }
      })
      .pipe(
        bufferTime(1000, null, 1),
        filter(buffer => buffer.length > 0),
        concatMap(buffer => of(buffer).pipe(delay(1000)))
      )
      .subscribe(console.log);
      } …

我有以下角度的 http 拦截器

import { Injectable, Inject } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse } from '@angular/common/http';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { tap } from "rxjs/operators";
import { ToastrService } from 'ngx-toastr';
import { NgxSpinnerService } from "ngx-spinner";

@Injectable()
export class AppHttpInterceptor implements HttpInterceptor {

  constructor(
    @Inject('API_URL') private baseUrl: string,
    public router: Router,
    public toasterService: ToastrService,
    private spinner: NgxSpinnerService
  ) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { …

我已经构建了 AuthInterceptor，它在 401 错误时发送请求以获取新令牌。

当我遇到 401 错误时，会调用 handle401Error 方法，但我试图等待其他 HTTP 请求，直到获得新令牌。但它不会等到获取新的刷新令牌，尽管它正在进行 HTTP 调用并获取新的访问令牌。请找到我所附的屏幕截图。

拦截器.ts

isRefreshingToken = false;
tokenSubject: BehaviorSubject<string | null> = new BehaviorSubject<string | null>(null);

intercept(
    request: HttpRequest<any>,
    next: HttpHandler
): Observable<HttpEvent<any>> {

    const timeOut = appSettings.ajaxTimeout;
    const retryCount = appSettings.retryCount;
    const retryDelay = appSettings.retryDelayMS;

    return next.handle(request).pipe(
        timeout(timeOut),
        catchError((error) => {
            if (error instanceof HttpErrorResponse) {
                const httpErrorCode: number = error['status'];
                switch (httpErrorCode) {
                    case StatusCodes.BAD_REQUEST:
                        return throwError(error);
                        //return this.handle400Error(error);
                    case StatusCodes.UNAUTHORIZED:
                        return this.handle401Error(request, next);
                    default:
                        this._toastr.error(
                            'Sorry! something …

如何使用Angular 4 HttpClient拦截器实现加载程序？我已经完成登录并附加了授权标头，并且我想知道是否在此过程中正在加载某些数据时是否也可以执行“加载器功能”？我想附加一个图标加载器，用于指示是否正在加载某些数据。顺便说一下，这是我的authinterceptor。

export class GithubAuthInterceptor implements HttpInterceptor {
  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({
      headers: req.headers.set('Authorization', 'token')
    });
    return next.handle(authReq);
  }
}

我可以window.navigator.onLine使用HttpInterceptor 来获取连接状态，如下所述，我可以全局访问请求。但是，如何取消HttpInterceptor内部的请求？还是有更好的方法来解决这个问题？

import { Injectable } from '@angular/core';
import {
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class InternetInterceptor implements HttpInterceptor {
    constructor() { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        //check to see if there's internet
        if (!window.navigator.onLine) {
            return //cancel request
        }
        //else return the normal request
        return next.handle(request);
    }
}

我有以下 HTTP 拦截器的实现Angular ^4.3.6。

import {Injectable} from "@angular/core";
import {
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
  HttpEvent,
  HttpResponse,
  HttpErrorResponse
} from "@angular/common/http";
import {Observable} from "rxjs/Observable";
import "rxjs/add/operator/do";

@Injectable()
export class InterceptorService implements HttpInterceptor {

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
): Observable<HttpEvent<any>> {
    return next.handle(req).do(evt => {
      console.log(evt);//this logs the success message properly
      if (evt instanceof HttpResponse) {
        //Keep going
      }
    },err => {
    console.log(err);
    //this logs the error but don't have useful info in it.
    });

}
}

在成功的 http …

我正在编写使用 IndexedDB 缓存数据的 Angular 应用程序。

每当应用程序即将对服务器进行特定的 http 调用时，我都想从 IndexedDB 检索此数据并丰富或替换来自服务器的响应。

问题是从 IndexedDB 检索数据是返回 Observable 的异步操作，我无法将修改后的数据返回给调用服务。

拦截器看起来像这样：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

  return next.handle(req).map((event) => {
    if (event instanceof HttpResponse) {
      console.log("before cacheResponseProccess");

      const val: Observable<HttpEvent<any>> = this.angularCache.cacheResponseProccess(event);

      val.subscribe(x => {
        console.log('Return modified response is:');
        console.log(x);
        return x;
      });
    }
  }).catch((error, caught) => {
    return Observable.throw(error);
  });
}

请参阅https://stackblitz.com/edit/angular-owqgb6上的问题示例

我是Angular的新手,我刚刚建立了一个拦截器.根据多个教程,你必须包括HTTP_INTERCEPTORS在app.module像这样:

providers: [{ provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true }]

我想知道该multi: true属性是什么意思/做什么以及它是否可以省略.

我已经阅读了有关此属性的angular.io指南.他们解释如下:

我不明白这一部分:

注意multi:true选项.这个必需的设置告诉Angular,HTTP_INTERCEPTORS是一个多提供者的标记,它注入一个值数组,而不是一个值.

这有点说明了这个概念,但是当拦截器注入多个值而不是它时,我还不太了解.例如,我自己的拦截器只是更改标题.这是否意味着它只注入一个值？

谢谢

编辑:

这是我的拦截器

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { LoginService } from '../Services/login.service';


@Injectable()
export class JwtInterceptor implements HttpInterceptor {

    constructor(private loginService:LoginService){}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        console.log("ik …

有些服务需要令牌，有些服务需要不同的内容类型。我应该如何在拦截器文件中管理它们？