如何在前端解码jwt令牌 - Javascript

JSON Web Token，简称JWT，是一种安全的身份验证机制，广泛用于前后端分离的应用中。在前端中，我们需要解析JWT令牌以获取用户信息或验证身份。本篇文章将介绍如何在Javascript中解码JWT令牌。

JWT的结构

JWT由三部分组成，分别为Header、Payload和Signature。例如一个JWT的格式如下：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

其中Header和Payload都是使用Base64编码的JSON字符串，Signature则是用于校验JWT的完整性的一段随机字符串。因此我们需要在Javascript中对Header和Payload进行Base64解码，即可获得其中的信息。

解码JWT

Javascript中可以使用atob()方法对Base64编码进行解码，示例代码如下：

const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';

const base64UrlDecode = (str) => {
  const base64 = str.replace(/-/g, '+').replace(/_/g, '/');
  const raw = atob(base64);
  return JSON.parse(raw);
}

const [header, payload, signature] = jwt.split('.');
const decodedHeader = base64UrlDecode(header); // 解码Header
const decodedPayload = base64UrlDecode(payload); // 解码Payload

console.log(decodedHeader); // {alg: "HS256", typ: "JWT"}
console.log(decodedPayload); // {sub: "1234567890", name: "John Doe", iat: 1516239022}

上述代码将JWT字符串进行了解码，解码后得到了Header和Payload中的信息。注意在解码过程中需要使用base64UrlDecode()方法，该方法将URL安全的Base64编码转换回标准的Base64编码以便解码。

结语

解析JWT令牌在前端应用中十分常见，通过本文我们学习了如何使用Javascript对JWT进行解码。当然，由于JWT令牌的特殊性，我们不要将其作为绝对的身份验证方法，仍需进行必要的安全性校验。