前言

我們已經知道要怎麼跟後端拿到資料，現在還需要知道怎麼在要資料的時候，讓對方知道我們的身分，進而在驗證權限後把資料給我們。前面我們使用的 API 大多是佛心開放大眾使用，實務面來說不可能所有 API 都是如此。

如果你搜尋一下 token 的中文，會發現他是代幣的意思。

是的，想像一下你在湯X熊丟入一枚代幣，機台的系統就知道可以讓你開始遊戲。或是在進入門禁管制的地方，刷一下你的嗶嗶卡，門就應聲開啟... Token 就是這樣的東西。

JSON Web Token（JWT）

認證的部分以前會用 Session 和 Cookie 來處理，在客戶登入後即在伺服器端建立 Session ，提供 Session ID ，之後再以 Session 認證用戶。也就是說必須有大量的資料庫儲存資料，衍伸大量成本及效能。此外更有安全上的疑慮。

但運用 JWT 則可以讓：

1. 每一次從客戶端向伺服器端發出請求，都是獨立的
2. 驗證後在伺服器端不會將驗證狀態透過 Session 儲存
3. 直接讓發出的請求帶有 JWT 字串，表明身份

用 JWT 來產生 Token 成了常見的方式之一。而流程也從建立並提供 Session ID 變成：

1. 伺服器端收到登入請求後，驗證使用者
2. 伺服器端產生和回傳一組帶有資訊、且僅能在伺服器端被驗證的 Token
3. Token 被回傳後，存取在「客戶端」(大多存在瀏覽器的 Storage 當中)
4. 往後客戶端向伺服器端發送請求時，皆附帶此 Token 讓伺服器端驗證
5. 若伺服器端在請求中沒有找到 Token，回傳錯誤；若有找到 Token 則驗證

透過使用者主動提供 Token ，可以讓沒有 Token 的惡意使用者無法傷害你，避免跨網域請求偽造攻擊。

那伺服器方要怎樣產生 Token 給別人使用呢？ Token 必須是安全不容易破解，且又能被認證的。不然如果有人製造出假的代幣，那可就損失慘重了。

JWT 組成

如果你今天要負責製造 Token ，那麼 JWT 是如何組成的也就變得很重要了！ JWT 主要由下面三個部分組成：

base64(Header) + base64(Payload) + base64(Signature)

• Header:

是一個 JSON ，可以在此設定 Token 種類為 JWT ，產生 Signature 要使用的雜湊演算法（alg）為 Base64 編碼。

• Payload(= claims):

是一個 JSON ，使用者和相關的資訊都可以放置其中。通常會使用 exp 設定 Token 到期的時間、iat 設定 Token 簽發時間。

但請注意！重要的資訊如用戶密碼請不要放在這裡面。因為這裡的編碼能夠輕易被轉回來原始資訊，容易洩漏個資。

• Signature:

這是透過在 Header 設定的雜湊演算法方式所產生的秘鑰。伺服器端在拿到 Token 後，透過解碼確認資料內容正確且未被變更，驗證對方身份。

需要創建 JWT Token 的人可以安裝並使用 jsonwebtoken 套件，那如果我是取得 Token 的一方，又要如何使用他表明身分呢？

使用 Token

在開始前要先提醒大家注意！

如果你今天是使用者，並從伺服器方取得了 Token ，請別讓其他人取得你的 Token ，因為這代表別人可以假裝成你，並使用你的 Token 為所欲為。

要在 axios 使用 Token 可以這樣打：

axios.defaults.headers.common[
  "Authorization"
] = `Bearer 取得的Token`

假設取得的 Token 是 abcdeuhifhieufh，那就是這樣：

axios.defaults.headers.common[
  "Authorization"
] = `Bearer abcdeuhifhieufh`

希望你喜歡今天的教學！晚安，我們明天見。

學習與參考資料

JS 學徒特訓班教學影片及練習題 49-50 關
透過 JWT 實作驗證機制： https://medium.com/%E9%BA%A5%E5%85%8B%E7%9A%84%E5%8D%8A%E8%B7%AF%E5%87%BA%E5%AE%B6%E7%AD%86%E8%A8%98/%E7%AD%86%E8%A8%98-%E9%80%8F%E9%81%8E-jwt-%E5%AF%A6%E4%BD%9C%E9%A9%97%E8%AD%89%E6%A9%9F%E5%88%B6-2e64d72594f8
淺談 Authentication 中集：Token-based authentication： https://medium.com/@vicxu/%E6%B7%BA%E8%AB%87-authentication-%E4%B8%AD%E9%9B%86-token-based-authentication-90139fbcb897
以 JSON Web Token 替代傳統 Token： https://yami.io/jwt/