在开发 Web 应用时，RESTful API 是不可避免的一部分。而对于 API 的安全认证，JWT 成为了一个较为流行的方法。本文将介绍 JWT 认证方法，其实现原理以及如何在前端应用中应用。
什么是 JWT
JWT，全称为 JSON Web Token，是一种基于 JSON 格式的轻量级认证和授权协议，用于在网络上传递身份信息和声明的一种标准方法。JWT 由三部分组成，分别是 Header、Payload 和 Signature。
Header
Header 包含了两部分信息：token 的类型和算法。例如：
{
"alg": "HS256",
"typ": "JWT"
}其中，alg 表示签名的算法，"HS256" 表示 HMAC-SHA256 算法；typ 表示 token 的类型，"JWT" 表示 JWT。
Payload
Payload 是存放用于验证的信息的地方，包含了一些声明和用户数据。例如：
{
"sub": "1234567890",
"name": "John Doe",
"iat": 1516239022
}其中，sub 表示用户唯一标识，name 表示用户姓名，iat 表示 token 的签发时间。
Signature
Signature 表示对 Header 和 Payload 的签名，用于验证 token 是否被篡改过。例如：
HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)
其中，"." 表示连接符。secret 为一个密钥，用于生成 Signature。Secret 必须保证安全，不能外泄。
如何使用 JWT 实现认证
生成 JWT
在服务器端生成 JWT 时，需要按照一定的规则生成 Header、Payload 和 Signature。以 Node.js 为例：
-- -------------------- ---- -------
----- --- - ------------------------
----- ------ - -----------
----- ------------- - ------ -- -
----- ------- - -
---- --------
----- ----------
---- ----------
--
----- ------- - -
---------- --------
---------- -----
--
------ ----------------- ------- ---------
--其中，generateToken 函数接收一个 user 对象作为参数，生成包含该用户信息的 token。payload 中的 sub 和 name 均为 user 对象中的属性，iat 表示 token 的签发时间。options 中指定了算法为 HMAC-SHA256，失效时间为 24 小时。
验证 JWT
在前端应用中，需要将生成的 JWT 携带在请求头中，每次请求都需要验证其有效性。以 React 为例：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
----- --- - --------------
-------- --------------------------
---
----- ------------ - ------- -- -
----------------------------------------- - ------- ----------
--
----- ----------- - -- -- -
----- ----- - ------------------------------
-- ------- -
----- - --- - - -----------------
----- -------- - ----- -------------------------
------ --------------
-
------ -----
--authenticate 函数用于将生成的 token 携带到请求头中，格式为 "Bearer [token]"。getAuthUser 函数用于获取当前认证用户，先从 localStorage 中读取 token，然后解码出其中的 sub 值，再通过 API 请求获取该用户信息。
总结
JWT 是一种较为流行的认证和授权协议，其简洁、安全、可扩展的特点受到了广泛的应用和推崇。在前端应用中，我们可以使用 JWT 进行身份验证和授权，从而保障 API 的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b1b06968c7c53b0a88df8