时间戳

首页 > 解决方案 > Angular - 无法使用 http 服务拦截 http 请求

angular - Angular - 无法使用 http 服务拦截 http 请求

问题描述

我有一个 Angular 6 应用程序。

我将 HTTP 拦截器分配给特定的延迟加载模块。当我使用 http 客户端直接在组件中进行 http 调用时，请求被拦截。但是，通过核心模块服务进行 http 调用，将无法拦截这些 http 请求。

请参阅以下示例。

https://stackblitz.com/edit/angular-ckzdvx?file=src%2Fapp%2Fa%2Ffirst%2Ffirst.component.ts

first.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiService } from './../../core/api.service';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {

  constructor(private http: HttpClient, private apiService: ApiService) { }

  ngOnInit() {
  }

  call() {
    this.http.get("https://jsonplaceholder.typicode.com/users").subscribe((res) => {
      console.log(res);
    })
  }

  call2() {

    this.apiService.get("https://jsonplaceholder.typicode.com/users").subscribe((res) => {
      console.log(res);

    });

  }

}

用例

我打了两个电话，第一个call()被拦截，第二个call2()没有被拦截。

结果

call2()应该在使用 api 服务时被拦截。

重要的是，http 拦截器仅在需要它的模块中声明。因为我不希望其他模块的 HTTP 请求被拦截。

标签： angular

解决方案

我不知道是否可以开箱即用地执行您需要的操作，但是当我遇到类似问题（必须拦截除一个之外的所有服务/模块发出的调用）时，我编写了拦截器来检查请求标头并对其做出反应。我在“无拦截请求”中添加了特殊的标头“skip-app-id”，触发拦截器本身的请求拦截绕过

所以基本上，如果请求包含“触发器”标头，拦截器就会跳过拦截。您可以执行类似的方法，并在拦截的请求中添加特殊的控制标头以触发拦截，否则绕过它。

总结一下，一般情况下是这样的：

  1. 提供全局拦截器（因为这是最简单的方法，而且你已经掌握了）
  2. 使其对标头敏感 - 拦截器必须检查请求标头
  3. 如果请求包含指定的标头 - 让我们说“do-intercept：true”做拦截工作
  4. 从请求中删除“do-intercept:true”标头，因为我们不想将它发送到任何地方
  5. 如果没有触发标头 - 跳过拦截逻辑（短路）

或多或少会完全满足您的要求。

推荐阅读