1.jwt介紹

介紹部分轉載自阮一峰《JSON Web Token 入門教程》

0.session 登錄

1、用戶向服務器發送用戶名和密碼，

2、服務器驗證通過后，在當前對話（session）里面保存相關資料，比如用戶角色、登錄時間等等，

3、服務器向用戶回傳一個 session_id，寫入用戶的 Cookie，

4、用戶隨后的每一次請求，都會通過 Cookie，將 session_id 傳回服務器，

5、服務器收到 session_id，找到前期保存的資料，由此得知用戶的身份，

1.session登錄存在的問題

這種模式的問題在于，擴展性（scaling）不好，單機當然沒有問題，如果是服務器集群，或者是跨域的服務導向架構，就要求 session 資料共享，每臺服務器都能夠讀取 session，

舉例來說，A 網站和 B 網站是同一家公司的關聯服務，現在要求，用戶只要在其中一個網站登錄，再訪問另一個網站就會自動登錄，請問怎么實作？

一種解決方案是 session 資料持久化，寫入資料庫或別的持久層，各種服務收到請求后，都向持久層請求資料，這種方案的優點是架構清晰，缺點是工程量比較大，另外，持久層萬一掛了，就會單點失敗，

另一種方案是服務器索性不保存 session 資料了，所有資料都保存在客戶端，每次請求都發回服務器，JWT 就是這種方案的一個代表，

2.原理

JWT 的原理是，服務器認證以后，生成一個 JSON 物件，發回給用戶，就像下面這樣，

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

以后，用戶與服務端通信的時候，都要發回這個 JSON 物件，服務器完全只靠這個物件認定用戶身份，為了防止用戶篡改資料，服務器在生成這個物件的時候，會加上簽名（詳見后文），

服務器就不保存任何 session 資料了，也就是說，服務器變成無狀態了，從而比較容易實作擴展，

3.JWT 的資料結構

實際的 JWT 大概就像下面這樣，

它是一個很長的字串，中間用點（.）分隔成三個部分，注意，JWT 內部是沒有換行的，這里只是為了便于展示，將它寫成了幾行，

JWT 的三個部分依次如下，

Header（頭部）

Payload（負載）

Signature（簽名）

寫成一行，就是下面的樣子，

Header.Payload.Signature

下面依次介紹這三個部分，

3.1 Header

Header 部分是一個 JSON 物件，描述 JWT 的元資料，通常是下面的樣子，

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

上面代碼中，alg屬性表示簽名的演算法（algorithm），默認是 HMAC SHA256（寫成 HS256）；typ屬性表示這個令牌（token）的型別（type），JWT 令牌統一寫為JWT，

最后，將上面的 JSON 物件使用 Base64URL 演算法（詳見后文）轉成字串，

3.2 Payload

Payload 部分也是一個 JSON 物件，用來存放實際需要傳遞的資料，JWT 規定了7個官方欄位，供選用，

iss (issuer)：簽發人

exp (expiration time)：過期時間

sub (subject)：主題

aud (audience)：受眾

nbf (Not Before)：生效時間

iat (Issued At)：簽發時間

jti (JWT ID)：編號

除了官方欄位，你還可以在這個部分定義私有欄位，下面就是一個例子，

{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true
}

注意，JWT 默認是不加密的，任何人都可以讀到，所以不要把秘密資訊放在這個部分，

這個 JSON 物件也要使用 Base64URL 演算法轉成字串，

3.3 Signature

Signature 部分是對前兩部分的簽名，防止資料篡改，

首先，需要指定一個密鑰（secret），這個密鑰只有服務器才知道，不能泄露給用戶，然后，使用 Header 里面指定的簽名演算法（默認是 HMAC SHA256），按照下面的公式產生簽名，

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

算出簽名以后，把 Header、Payload、Signature 三個部分拼成一個字串，每個部分之間用"點"（.）分隔，就可以回傳給用戶，

3.4 Base64URL

前面提到，Header 和 Payload 串型化的演算法是 Base64URL，這個演算法跟 Base64 演算法基本類似，但有一些小的不同，

JWT 作為一個令牌（token），有些場合可能會放到 URL（比如 api.example.com/?token=xxx），Base64 有三個字符+、/和=，在 URL 里面有特殊含義，所以要被替換掉：=被省略、+替換成-，/替換成_ ，這就是 Base64URL 演算法，

4.JWT 的使用方式

客戶端收到服務器回傳的 JWT，可以儲存在 Cookie 里面，也可以儲存在 localStorage，

此后，客戶端每次與服務器通信，都要帶上這個 JWT，你可以把它放在 Cookie 里面自動發送，但是這樣不能跨域，所以更好的做法是放在 HTTP 請求的頭資訊Authorization欄位里面，

Authorization: Bearer <token>

另一種做法是，跨域的時候，JWT 就放在 POST 請求的資料體里面，

5.JWT 的幾個特點

（1）JWT 默認是不加密，但也是可以加密的，生成原始 Token 以后，可以用密鑰再加密一次，

（2）JWT 不加密的情況下，不能將秘密資料寫入 JWT，

（3）JWT 不僅可以用于認證，也可以用于交換資訊，有效使用 JWT，可以降低服務器查詢資料庫的次數，

（4）JWT 的最大缺點是，由于服務器不保存 session 狀態，因此無法在使用程序中廢止某個 token，或者更改 token 的權限，也就是說，一旦 JWT 簽發了，在到期之前就會始終有效，除非服務器部署額外的邏輯，

（5）JWT 本身包含了認證資訊，一旦泄露，任何人都可以獲得該令牌的所有權限，為了減少盜用，JWT 的有效期應該設定得比較短，對于一些比較重要的權限，使用時應該再次對用戶進行認證，

（6）為了減少盜用，JWT 不應該使用 HTTP 協議明碼傳輸，要使用 HTTPS 協議傳輸，

2.koa2中使用jwt

1.jsonwebtoken插件

這個插件提供了生成jwt，校驗jwt，解碼jwt的能力，在專案中，我們僅需要使用生成jwt，和解碼jwt的能力，就可以了，

生成token

const jsonwebtoken = require('jsonwebtoken');

const USER = {
  username: 'zhangsan',
  password: '123456',
  id: 100
}

const SECRET = 'laotie666'; //隨意輸入

const token = jsonwebtoken.sign(
          { name: USER.username, id: USER.id },  // 加密userToken
          SECRET,
          { expiresIn: '1h' }
        )

這樣就生成了一串字串，token現在的值是：

"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiemhhbmdzYW4iLCJpZCI6MTAwLCJpYXQiOjE1ODg1MTM2NTksImV4cCI6MTU4ODUxNzI1OX0.jFXifMFFizqRUK0V5clFql4VrtrQiTaD_wpsogNi6TY"

如果我想要獲取這上面的資訊，不需要知道秘鑰，直接使用jsonwebtoken這個插件就可以了，

const jsonwebtoken = require('jsonwebtoken');

const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiemhhbmdzYW4iLCJpZCI6MTAwLCJpYXQiOjE1ODg1MTM2NTksImV4cCI6MTU4ODUxNzI1OX0.jFXifMFFizqRUK0V5clFql4VrtrQiTaD_wpsogNi6TY"

console.log(jsonwebtoken.decode(token)); // { name: 'zhangsan', id: 100, iat: 1588511684, exp: 1588515284 }

2.koa-jwt 中間件的使用

這個中間件提供了一個校驗方法，可以在專案中全域校驗，兩行代碼就搞定了，

const koa = require('koa');
const koajwt = require('koa-jwt');
const app = new koa();

const SECRET = 'laotie666'; // demo，可更換

app.use(koajwt({ secret: SECRET }).unless({
  // 登錄介面不需要驗證
  path: [/^\/api\/login/]
}));

我們發送請求的時候把剛才生成的token放到請求頭Authorization上，如果這個token里的秘鑰，等于koajwt里第一個引數中的secret屬性，那么就可以通過用戶驗證，否則回傳401錯誤，

如果想自定義處理這個錯誤，可以在上方添加中間件用next().catch()對401錯誤進行捕獲

const koa = require('koa');
const koajwt = require('koa-jwt');
const app = new koa();

const SECRET = 'laotie666'; // demo，可更換

app.use(async (ctx, next) => {
  return next().catch((err) => {
    if (err.status === 401) {
      // 自定義回傳結果
      ctx.status = 401;
      ctx.body = {
        code: 401,
        msg: err.message
      }
    } else {
      throw err;
    }
  })
});

app.use(koajwt({ secret: SECRET }).unless({
  // 登錄介面不需要驗證
  path: [/^\/api\/login/]
}));

3.結合起來

分為如下幾個步驟

引入相應的插件

const koa = require('koa');
const koajwt = require('koa-jwt');
const jsonwebtoken = require('jsonwebtoken');
const koabody = require('koa-body');
const app = new koa();

定一個秘鑰
```
const SECRET = 'laotie666'; 
```

做一個虛假的資訊，不用連接資料庫了

const USER = {
  username: 'zhangsan',
  password: '123456',
  id: 100
}

首先我們先進行登錄操作，獲取到body里的用戶名密碼，和資料庫進行比對，如果無誤就用jwt插件生成token然后由瀏覽器locationstage保存起來.

app.use(async (ctx, next) => {
  if (ctx.path === '/api/login' && ctx.method === 'POST') {
    // 登錄
    // 判斷用戶名密碼是否匹配
    let checkUser = ctx.request.body.username == USER.username && ctx.request.body.password == USER.password;
    if (checkUser) {
      ctx.body = {
        code: 200,
        msg: '登錄成功',
        token: jsonwebtoken.sign(
          { name: USER.username, id: USER.id },  // 加密userToken
          SECRET,
          { expiresIn: '1h' }
        )
      }
    } else {
      // 登錄失敗, 用戶名密碼不正確
      ctx.body = {
        code: 400,
        msg: '用戶名密碼不匹配'
      }
    }

下次我們發送其他請求的時候，我們將token取出來，放到請求頭里的Authorization里，然后給token前面加上Bearer 和一個空格，

這樣koa-jwt插件就可以對token進行驗證，驗證就是檢查秘鑰是否相等，相等就可以接著進行請求，

// 中間件對401錯誤進行
app.use(async (ctx, next) => {
  return next().catch((err) => {
    if (err.status === 401) {
      ctx.status = 401;
      ctx.body = {
        code: 401,
        msg: err.message
      }
    } else {
      throw err;
    }
  })
});

app.use(koajwt({ secret: SECRET }).unless({
  // 登錄介面不需要驗證
  path: [/^\/api\/login/]
}));

具體請求

else if (ctx.path === '/api/user' && ctx.method === 'GET') {
    // 獲取用戶資訊
    // 中間件統一驗證token
    let token = ctx.header.authorization;
    let payload = await util.promisify(jsonwebtoken.verify)(token.split(' ')[1], SECRET);
    console.log(payload);
    ctx.body = {
      code: 200,
      data: payload,
      msg: '請求成功'
    }
  }

登錄請求
不攜帶token
攜帶token

4.完整代碼

直接node 檔案名.js執行即可啟動服務，

const koa = require('koa');
const koajwt = require('koa-jwt');
const jsonwebtoken = require('jsonwebtoken');
const util = require('util');
const koabody = require('koa-body');
const app = new koa();

const SECRET = 'laotie666'; // demo，可更換

app.use(koabody());

// 中間件對token進行驗證
app.use(async (ctx, next) => {
  return next().catch((err) => {
    if (err.status === 401) {
      ctx.status = 401;
      ctx.body = {
        code: 401,
        msg: err.message
      }
    } else {
      throw err;
    }
  })
});

app.use(koajwt({ secret: SECRET }).unless({
  // 登錄介面不需要驗證
  path: [/^\/api\/login/]
}));

// 示例
const USER = {
  username: 'zhangsan',
  password: '123456',
  id: 100
}
// 登錄介面簽發token, 為了簡便不使用router
app.use(async (ctx, next) => {
  if (ctx.path === '/api/login' && ctx.method === 'POST') {
    // 登錄
    // 判斷用戶名密碼是否匹配
    let checkUser = ctx.request.body.username == USER.username && ctx.request.body.password == USER.password;
    if (checkUser) {
      ctx.body = {
        code: 200,
        msg: '登錄成功',
        token: jsonwebtoken.sign(
          { name: USER.username, id: USER.id },  // 加密userToken
          SECRET,
          { expiresIn: '1h' }
        )
      }
    } else {
      // 登錄失敗, 用戶名密碼不正確
      ctx.body = {
        code: 400,
        msg: '用戶名密碼不匹配'
      }
    }
  } else if (ctx.path === '/api/user' && ctx.method === 'GET') {
    // 獲取用戶資訊
    // 中間件統一驗證token
    let token = ctx.header.authorization;
    let payload = await util.promisify(jsonwebtoken.verify)(token.split(' ')[1], SECRET);
    console.log(payload);
    ctx.body = {
      code: 200,
      data: payload,
      msg: '請求成功'
    }
  }
})
app.listen(3000, function () {
  console.log('listening 3000');
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/100528.html

標籤：JavaScript

上一篇：25.JavaScript執行背景關系

下一篇：Promis.then()

koa2實作jwt登錄