剛開始學習使用有關 JWT 的 Authentication。

前天談到什麼是 JWT (JSON Web Token)?
[SteemSnap - JWT (JSON Web Token) 學習日記 - 01](https://steemcn.herokuapp.com/hive-180932/@nuagnorab/steemsnap-jwt-json-web-token-01)

昨天簡介一下 Basic session-based Authentication flow。
 [SteemSnap - JWT (JSON Web Token) 學習日記 - 02 - Basic session-based Authentication flow](https://steemcn.herokuapp.com/hive-180932/@nuagnorab/steemsnap-jwt-json-web-token-02-basic-session-based-authentication-flow)

---


今天想接著簡介一下 Basic JWT-based Authentication flow. 我是跟據使用上 ```passport-jwt``` 簡化後的 flow.

![](https://hackernoon.com/photos/pazJZnCJTqSZxQS4tltZo4Gatbo1-fo8h3yl1)

1. 用戶使用 credentials 登錄
2. 後端服務器驗證 credentials，屴功後簽署```JWT```，然後將該```JWT```發送回用戶的客户端。
3. 用戶將通過本地存儲將JWT存儲在客户端瀏覽器中。
4. 對於每個請求，客戶端（通常是 React / vue 應用程序）會將存儲在```localStorage```中的```JWT```添加到```Authorization HTTP header``` 中（類似於 ```session``` 存儲在Cookie header 中的方式）
5. 對於每個請求，後端應用程序將運行 ```passport.authenticate()```中間件，該中間件將從```Authorization HTTP header```中提取```JWT```，使用公共密鑰進行驗證，允許或禁止用戶訪問路線或進行API調用 。

---

以上就是簡單的 JWT-based Authentication flow 了。

下次會比較一下 Session-based 和 JWT-based 的。

Cheers!