Express | JSON Web Token

>> 發文日期 : 2023/8/14

> 說明

JWT(JSON Web Token)可說是一個非常普遍應用的身分驗證工具,機制上就很像門票一樣,當你登入時,會從API獲得一個專屬你身份認證的Token,之後再請求其他API資料時,只要在header裡加入這個Token憑證,後端就可以驗證你的身份,並且回傳資料給你。


> 前置設定

從上述的說明我們可以知道,Token的來源主要是後端會做身份確認後,再回傳給前端,在後端我們要先規範幾個簡單的約定,像是Token的過期時間、Token的加密方式等等,這邊就先來設定一下。

這邊我們設定了兩個環境變數,一個是JWT_SIGN_SECRET,這是用來加密Token的密鑰,另一個是JWT_EXPIRES_IN,這是用來設定Token的過期時間,這邊我們設定為4小時。

> 建立JWT

我們就直接來看如何生成Token,其實非常簡單就不把整個API的內容都搬上來了。首先我一樣先把schema的驗證做好,避免一些格式要求上的錯誤,接著就會進到生成的步驟,因為我是使用body-parser的套件,所以可以直接從req.body取得資料,這邊我們先取得username與password,接著就是使用jwt.sign來生成Token,這邊的第一個參數是我們要加密的資料,第二個參數是我們的密鑰,第三個參數是我們的過期時間,這邊我們使用了環境變數來設定,最後就是回傳Token給前端。

> 驗證Token

這部分並不是要做一個驗證的API來驗證Token,而是建立一個middleware,在需要驗證Token資料的API前都加上去這段。

這邊我們先來看看middleware的部分,首先我們先取得Token,這邊我們是從req.headers裡取得,接著就是使用jwt.verify來驗證Token,這邊的第一個參數是我們要驗證的Token,第二個參數是我們的密鑰,第三個參數是我們的callback,當驗證成功後,我們可以在callback裡取得我們加密的資料,這邊我們將username儲存到res.locals裡,之後就可以在API裡取得這個資料。


> 使用方式

這邊我們就來看看這個middleware如何在API上使用。

可以看到我們在上述的程式碼內套入了router.use(verify),也就是驗證Token的middleware功能,這樣就可以在第一時間就知道使用者當前的身份,並且可以在res.locals裡取得資料。

而在前端的部份,我們可以在每次請求API時,都在header裡加入Token,這邊我們使用了axios來做請求。