Angular 8 （四）Token 注入

功能流程：

1. client 提供用戶名密碼向server 端發起登錄請求。

2. Server 端驗證登錄信息，並產生用戶 token

3. client 端收到登錄 token, 並保存到本地（cookies, storage,,,）

4. 向每個client 端請求頭注入用戶 token。

 

1.  client 提供用戶名密碼向server 端發起登錄請求

自行定義一個訪問api 的service. 細節見：https://www.cnblogs.com/crdanding/p/12096392.html

通過httpClient 訪問 WebApi，如下：

 

 

 

2. Server 端驗證登錄信息，並產生用戶 token

• 　　Asp.net WebApi 項目創建時，自帶 Owin 類庫組，如果你創建的是一個空的 WebApi 項目，那么可以通過 Nuget package 手動添加 Owin 類庫組。

 

 

• 創建一個OwinAuthorize 類，如下：

 

 

 

 

•  在 Startup.cs 中添加初始化

 

 

 

3. client 端收到登錄 token, 並保存到本地

 

 

 

 

4.  向每個client 端請求頭注入用戶 token

 Angular 的 http 本身支持添加 http 中間件的行為，我們要做的是：1. 重寫 http 中間件方法。 2. 在app.module.ts 中引用我們重寫的 中間件

• 創建一個JS 文件，這里命名為： auth.interceptor.ts, 代碼如下：

作用就是向每個http 請求頭部寫入用戶 token.

 

 

 

• 在app.module.ts中加入引用，並指定執行

 

 

 

 

 

 

這樣，每個從client 端發出的 http 請求都會自動添加上 token, 不需要到沒有請求中處理。