讲述JSON Web Token（概念）

「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」。

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

---

JSON Web Tokens是目前最流行的跨域认证解决方案，在集群环境下使得用户的认证变得简单，解放了实现服务器间session共享的复杂逻辑。 ​

工作原理：

JWT在服务器认证后生成包含用户信息，时间时间，安全信息等内容组成的JSON对象来唯一表示当前用户状态，在其后的数据交互中持续携带来表明请求的有效性。

数据结构：

JWT是有header，payload和signature三部分通过“.”连接起来的字符串，在JWT字符串中没有换行。

Header（头部）：

header是一个JSON对象，用来描述一些元数据，示例如下：

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

上述示例中指明了使用的验签加密算法为“HmacSHA256”，“HS256”为简写内容，令牌类型固定使用“JWT”即可，在进行生成验签的时候需要使用Base64Url进行编码处理，相对于Base64编码的好处是对“=”，“+”，“/”进行了相对应的处理（=被省略、+替换成-，/替换成_），可以放心的在Url上进行拼接，你是否在Url上挂Base64编码后的参数导致解析失败的时候呢？你是不是也是自己“replace”搞定的，下次就用Base64Url吧。

Payload（负载）：

payload的格式要求同header，内容主要官方定义字段+自定义的字段来满足业务场景的需要，示例如下：

{
  "nbf": 1636438632, // 生效时间
  "exp": 1637438632, // 过期时间
  "jti": "", // 编号
  "aud": "", // 受众
  "sub": "", // 主题
  "iat": "", // 签发时间
  "iss": "", // 签发人
  "name": "",
  "userid": "",
  "companyid": "",
}

上述示例中有备注的为官方定义的字段，未进行备注的未自定义的扩展字段，在生成验签时与header的处理方式相同。

Signature（签名）：

上述的“Header”和“Payload”都没有提到加密一说，只是进行的字符的编码，所以在“Header”和“Payload”中我们不应该放置一些用户相关的涉及安全的信息，未防止上述两块的内容被中间商拦截篡改，我们需要用到这一段落要提到的“Signature”，具体的加密格式如下：

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

在这提供在nodejs环境中的实现函数：

1. 将“Header”和“Payload”分别转为字符串后通过“base64url”进行编码处理并通过“.”进行连接。
2. 通过“crypto-js”提供的加密函数“HmacSHA256”进行加密并转为16进制（按需处理即可）表示。
3. 生成验签后我们通过“.”拼接原有的“text”部分组成最终的JWT字符串。

// https://www.npmjs.com/package/crypto-js
// https://cryptojs.gitbook.io/docs/
 
const CryptoJS = require('crypto-js');
const base64url = require('base64url');
 
function createJWTString(secret = "", header = {}, payload = {}) {
    const text = base64url(JSON.stringify(header)) + "." + base64url(JSON.stringify(payload));
    const words = CryptoJS.HmacSHA256(text, secret);
    let signature = CryptoJS.enc.Hex.stringify(words);
    return `${text}.${signature}`;
}
 

使用方式：

标准的使用方式为在HTTP的头部增加key为“Authorization”，value为：“ Bearer ”的一组信息，token的具体存储按实际业务处理。

注意事项：

1. JWT默认不加密，但可以自行加密处理。
2. 采用默认不加密的情况，请勿将涉密数据放入JWT中。
3. 建议采用HTTPS来防止中间人攻击。

---

欢迎关注我的公众号“前端小鑫同学”，原创技术文章第一时间推送。