假import { Injectable } from '@angular/core';
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';

import { Observable } from 'rxjs';

/** Pass untouched request through to the next request handler. */
@Injectable()
export class NoopInterceptor implements HttpInterceptor {

intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<httpevent>> {
    return next.handle(req);
  }
}
```

這個 NoopInterceptor 是由 Angular 的依賴注入 (DI) 系統管理的服務。 與其他服務一樣，開發人員必須先提供攔截器類(Interceptor Class)，然後應用才能使用它。

由於攔截器是 HttpClient 服務的可選依賴項(`optional dependencies`)，因此必須在提供 HttpClient 的同一注入器或注入器的父級中提供它們。 DI 建立 HttpClient 後提供的攔截器將被忽略。

如果應用程式在應用程式的根注入器中提供 HttpClient，作為在 AppModule 中匯入 HttpClientModule 的副作用，那麼也應該在 AppModule 中提供攔截器。

從 `@angular/common/http` 匯入 HTTP_INTERCEPTORS 注入令牌後，按照下列形式為 NoopInterceptor 提供 provider.

```typescript
{ provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true },
```

注意上面程式碼的 `multi: true` 選項。 這個設定告訴 Angular, `HTTP_INTERCEPTORS` 是一個用於注入`一組值`，而不是注入`單個值`的 `多提供者`的令牌。

考慮建立一個 `barrel index` 檔案，將所有攔截器提供者的程式碼，收集到一個 httpInterceptorProviders 陣列中。

這個 barrel index 檔案的檔名為 index.ts, 內容如下：

```typescript
/* "Barrel" of Http Interceptors */
import { HTTP_INTERCEPTORS } from '@angular/common/http';

import { NoopInterceptor } from './noop-interceptor';

/** Http interceptor providers in outside-in order */
export const httpInterceptorProviders = [
  { provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true },
];
```
然後我們在 App Module 裡直接從 `index.ts` 裡匯入 httpInterceptorProviders 陣列即可：

```typescript
providers: [
  httpInterceptorProviders
],
```

下面我們看一看 Spartacus 的 SiteContextInterceptor 是如何被匯入 NgModule 的。

發現它被匯入一個名為 `SiteContextOcc` 的 module 之中。
![](https://img-blog.csdnimg.cn/img_convert/1629188952c9eafcd93a0a333068d504.png)

在這個 module 裡，我們使用了 `useExisting` 而非 `useClass`：

![](https://img-blog.csdnimg.cn/img_convert/3a9ddc174adcffd1be82bcd99f8c6881.png)

useExisting 相當於 provider alias，即別名。

```javascript
{provide: Class2, useExisting: Class2}
```

上面的程式碼並不會導致 Angular DI 框架主動為 Class2 建立例項。執行時如果建構函式請求 Class2 的例項，Angular DI 會為 key 為 Class2 的依賴，尋找另一個 `provider`，並從這個 Class2 提供者中取出注入例項。 開發人員可以把 `useExisting` 看成對另一個提供者或別名的引用。</httpevent></any>

SAP Spartacus HTTP Interceptor 的 provisioning 邏輯

相關文章