Angular HTTP Interceptor 的幾種使用場景之中，最常見的就是為 outbound HTTP 請求，新增 Authorization 頭部欄位。

下面這段示例應用程式有一個 AuthService，它產生一個 `Authorization token`。在AuthInterceptor 中注入該服務以獲取 token，並向每個傳出請求新增帶有該 token 的 Authorization header：

```typescript
import { AuthService } from '../auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

constructor(private auth: AuthService) {}

intercept(req: HttpRequest<any>, next: HttpHandler) {
    // Get the auth token from the service.
    const authToken = this.auth.getAuthorizationToken();

// Clone the request and replace the original headers with
    // cloned headers, updated with the authorization.
    const authReq = req.clone({
      headers: req.headers.set('Authorization', authToken)
    });

// send cloned request with header to the next handler.
    return next.handle(authReq);
  }
}
```
當然，上面先 clone 請求，再設定欄位，有更簡潔的寫法：

```typescript
// Clone the request and set the new header in one step.
const authReq = req.clone({ setHeaders: { Authorization: authToken } });
```
在 SAP Spartacus 的 Angular 程式碼中也採取了上述的思路來實現。

一個例子：AuthHttpHeaderService

這個類是 AuthInterceptor 的一個 service 類：
![](https://img-blog.csdnimg.cn/img_convert/73a963a4670f362d7187200424099e1c.png)

我們檢視 `alterRequest` 方法的註釋，得知其作用就是給 OCC API 呼叫的 HTTP 請求新增 `Authorization` 欄位。

首先呼叫第 147 行的方法 `getAuthorizationHeader`，判斷當前的請求物件 request：

這個方法的實現原始碼：

```typescript
  protected getAuthorizationHeader(request: HttpRequest<any>): string | null {
    const rawValue = request.headers.get('Authorization');
    return rawValue;
  }
```

因為如果請求頭部已經擁有 `Authorization` 欄位，我們就不應該繼續新增了。

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

isOccUrl 的實現程式碼：

```typescript
  protected isOccUrl(url: string): boolean {
    return url.includes(this.occEndpoints.getBaseUrl());
  }
```

如果該請求 url 包含 OCC endpoint，並且還沒有 Authorization 欄位新增，則進入程式碼第 150 行，新增 Access Token.

方法 `createAuthorizationHeader` 接收的引數 token 的型別為 AuthToken，這是一個 interface：

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

interface 的欄位列表：

```typescript
export interface AuthToken {
  /**
   * Token used for `Authorization` header.
   */
  access_token: string;
  /**
   * Token to refresh the `access_token` when it expires.
   */
  refresh_token?: string;
  /**
   * Time when `access_token` expires.
   */
  expires_at?: string;
  /**
   * Scopes granted by the OAuth server.
   */
  granted_scopes?: string[];
  /**
   * Time when `access_token` was fetched from OAuth server and saved.
   */
  access_token_stored_at: string;
  /**
   * Type of the `access_token`. Most often `Bearer`.
   */
  token_type?: string;
}
```
可見 AuthToken 介面除了包含 Access Token 之外，還有其超時時間，以及 refresh token 的值。但對於我們當前的場景，我們僅需要關注 `access_token` 欄位。

如下圖三個關鍵點所示：

- 首先檢查 token 輸入引數的欄位 `access_token`，如果可用，直接返回該欄位值；
- 如果 access_token 欄位不可用，從 Ngrx 這個 memory store 裡讀取出來，賦給臨時變數 currentToken
- 將 currentToken 的值返回給呼叫者
![](https://img-blog.csdnimg.cn/img_convert/29c2400a1ade525d76a2fd97a9d53ca4.png)</any></any>

SAP Spartacus UI 透過 HTTP Interceptor 給請求新增 Authorization 欄位的原始碼分析

相關文章