JWT 簡介

什麼是 JWT

全稱 JSON Web Token ， 是目前最流行的跨域認證解決方案。基本的實現是服務端認證後，生成一個 JSON 物件，發回給使用者。使用者與服務端通訊的時候，都要發回這個 JSON 物件。

該 JSON 類似如下：

{
 "姓名": "張三","角色": "管理員","到期時間": "2018年7月1日0點0分"
}

為什麼需要 JWT

先看下一般的認證流程，基於 session_id 和 Cookie 實現

1、使用者向伺服器傳送使用者名稱和密碼。

2、伺服器驗證通過後，在當前對話（ session ）裡面儲存相關資料，比如使用者角色、登入時間等等。

3、伺服器向用戶返回一個 session_id

4、使用者隨後的每一次請求，都會通過 Cookie ，將 session_id 傳回伺服器。

5、伺服器收到 session_id ，找到前期儲存的資料，由此得知使用者的身份。

但是這裡有一個大的問題， 假如是伺服器叢集，則要求 session 資料共享，每臺伺服器都能夠讀取 session 。這個實現成本是比較大的。

而 JWT 轉換了思路，將 JSON 資料返回給前端的，前端再次請求時候將資料傳送到後端，後端進行驗證。也就是伺服器是無狀態的，所以更加容易拓展。

JWT 的資料結構

JWT 的三個部分依次如下:

Header （頭部），類似如下

{
 "alg": "HS256","typ": "JWT"
}

alg 屬性表示簽名的演算法（ algorithm ），預設是 HMAC SHA256 （寫成 HS256 ）。 typ 屬性表示這個令牌（ token ）的型別（ type ）， JWT 令牌統一寫為 JWT

Payload （負載）。也是一個 JSON ，用來存放實際需要傳遞的資料。 JWT 規定了 7 個官方欄位。如下所示

• iss (issuer)：簽發人
• exp (expiration time)：過期時間
• sub (subject)：主題
• aud (audience)：受眾
• nbf (Not Before)：生效時間
• iat (Issued At)：簽發時間
• jti (JWT ID)：編號

當然也可以自定義私有欄位。 但是要注意，JWT 預設是不加密的，任何人都可以讀到，所以不要把祕密資訊放在這個部分。

Signature （簽名）。 Signature 部分是對前兩部分的簽名，防止資料篡改。首先，需要指定一個金鑰（ secret ）。這個金鑰只有伺服器才知道，不能洩露給使用者。然後，使用 Header 裡面指定的簽名演算法（預設是 HMAC SHA256 ），按照下面的公式產生簽名。

HMACSHA256(
 base64UrlEncode(header) + "." +
 base64UrlEncode(payload),secret)

算出簽名以後，把 Header 、 Payload 、 Signature 三個部分拼成一個字串，每個部分之間用"點"（.）分隔，就可以返回給使用者。如下所示

JWT 的安全

• JWT 預設是不加密，但也是可以加密的。 JWT 不加密的情況下，不能將祕密資料寫入 JWT
• JWT 本身包含了認證資訊，一旦洩露，任何人都可以獲得該令牌的所有許可權。為了減少盜用， JWT 的有效期應該設定得比較短。對於一些比較重要的許可權，使用時應該再次對使用者進行認證
• 為了減少盜用， JWT 不應該使用 HTTP 協議明碼傳輸，要使用 HTTPS 協議傳輸

Node 簡單demo—— Koa JWT 的實現

說完理論知識，我們來看下如何實現 JWT ，大致的流程如下：

首先，使用者登入後服務端根據使用者資訊生成並返回 token 給到客戶端，前端在下次請求中把 token 帶給伺服器，伺服器驗證有效後，返回資料。無效的話，返回 401 狀態碼

這裡我們用 Node 實現，主要用到的兩個庫有

jsonwebtoken ，可以生成 token ，校驗等

koa-jwt 中介軟體 對 jsonwebtoken 進一步的封裝，主要用來校驗 token

快速搭建一個 koa 專案

發現官方目前沒有一個快速搭建 koa 專案的方式，像 Vue-cli 一樣。（可能是搭建一個 koa 專案成本也很低）。但懶人的我，還是找到了一個工具 ——koa-generator ，使用也相對簡單，如下

安裝

npm install -g koa-generator

koa2 my-project 新建一個叫做 my-project 的 koa2 專案

cd my-project 和 npm install

啟動專案 npm start

開啟 localhost:3000

生成 Token

為了演示方便，我這裡直接定義了變數 userList 儲存使用者的資訊，真實應該是存放在資料庫中的。

const crypto = require("crypto"),jwt = require("jsonwebtoken");
// TODO:使用資料庫
// 這裡應該是用資料庫儲存，這裡只是演示用
let userList = [];

class UserController {
 // 使用者登入
 static async login(ctx) {
  const data = ctx.request.body;
  if (!data.name || !data.password) {
   return ctx.body = {
    code: "000002",message: "引數不合法"
   }
  }
  const result = userList.find(item => item.name === data.name && item.password === crypto.createHash('md5').update(data.password).digest('hex'))
  if (result) {
   const token = jwt.sign(
    {
     name: result.name
    },"Gopal_token",// secret
    { expiresIn: 60 * 60 } // 60 * 60 s
   );
   return ctx.body = {
    code: "0",message: "登入成功",data: {
     token
    }
   };
  } else {
   return ctx.body = {
    code: "000002",message: "使用者名稱或密碼錯誤"
   };
  }
 }
}

module.exports = UserController;

通過 jsonwebtoken 的 sign 方法生成一個 token 。該方法第一個引數指的是 Payload （負載），用於編碼後儲存在 token 中的資料，也是校驗 token 後可以拿到的資料。第二個是祕鑰，服務端特有， 注意校驗的時候要相同才能解碼，而且是保密的 ，一般而言，最好是定公共的變數，這裡只是演示方便，直接寫死。第三個引數是 option ，可以定義 token 過期時間

客戶端獲取 token

前端登入獲取到 token 後可以儲存到 cookie 中也可以存放在 localStorage 中。這裡我直接存到了 localStorage 中

login() {
 this.$axios
  .post("/api/login",{
   ...this.ruleForm,})
  .then(res => {
   if (res.code === "0") {
    this.$message.success('登入成功');
    localStorage.setItem("token",res.data.token);
    this.$router.push("/");
   } else {
    this.$message(res.message);
   }
  });
}

封裝 axios 的攔截器，每次請求的時候把 token 帶在請求頭髮送給伺服器進行驗證。這裡如果之前放在 Cookie 中，可以讓它自動傳送，但是這樣不能跨域。所以推薦做法是放在 HTTP 請求頭 Authorization 中，注意這裡的 Authorization 的設定，前面要加上 Bearer 。詳情可以見 Bearer Authentication

// axios 請求攔截器處理請求資料
axios.interceptors.request.use(config => {
 const token = localStorage.getItem('token');
 config.headers.common['Authorization'] = 'Bearer ' + token; // 留意這裡的 Authorization
 return config;
})

校驗 token

使用 koa-jwt 中介軟體進行驗證，方式比較簡單，如下所示

// 錯誤處理
app.use((ctx,next) => {
 return next().catch((err) => {
   if(err.status === 401){
     ctx.status = 401;
    ctx.body = 'Protected resource,use Authorization header to get access\n';
   }else{
     throw err;
   }
 })
})

// 注意：放在路由前面
app.use(koajwt({
 secret: 'Gopal_token'
}).unless({ // 配置白名單
 path: [/\/api\/register/,/\/api\/login/]
}))

// routes
app.use(index.routes(),index.allowedMethods())
app.use(users.routes(),users.allowedMethods())

需要注意的是以下幾點：

• secret 必須和 sign 時候保持一致
• 可以通過 unless 配置介面白名單，也就是哪些 URL 可以不用經過校驗，像登陸/註冊都可以不用校驗
• 校驗的中介軟體需要放在需要校驗的路由前面，無法對前面的 URL 進行校驗

演示

如果直接訪問需要登入的介面，則會 401

先註冊，後登入，不然會提示使用者名稱或者密碼錯誤

登入後帶上 Authorization ，可以正常訪問，返回 200 以及正確的資料

總結

本文總結了關於 JWT 鑑權相關的知識，並提供了一個 koa2 實現的簡單 demo ，希望對大家有所幫助。

受制於篇幅，有機會單獨說下 koa-jwt 的原始碼，也相對比較簡單~

本文 demo 地址:Client 和Server

參考

JSON Web Token 入門教程

Node.js 應用：Koa2 使用 JWT 進行鑑權

到此這篇關於Node使用koa2實現一個簡單JWT鑑權的方法的文章就介紹到這了,更多相關Node koa2 JWT鑑權內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！