什么是 JWT
JWT 是一种基于 JSON 的开放标准，用于在各方之间安全地传输声明。JWT 可以被用于认证和授权。它在使用上很简单，可以单独使用或与其他认证方法结合使用。
JWT 由三部分组成：Header（头）、Payload（载荷）和 Signature（签名）。Header 包含了 JWT 的类型以及算法信息，Payload 包含了 JWT 所要传递的信息（例如用户 ID、角色等），Signature 基于 Header 和 Payload 以及一个秘钥生成，用来验证 JWT 的合法性。
以下是一个示例 JWT：
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
1. 登录
客户端本地使用用户名和密码进行登录。服务器会验证身份并颁发 JWT，一般将其存储在客户端的 localStorage 中。
以下是一个示例代码：
前端代码：
// 登录
const response = await axios.post('/api/login', {
username,
password
})
// 存储 JWT
localStorage.setItem('jwt', response.data.token)后端代码：
-- -------------------- ---- -------
---------------------- ----- ----- ---- -- -
----- - --------- -------- - - --------
-- ----
----- ---- - ----- -----------------------------
-- ------ -- ------------------------------- -
------ ------------------------------------
-
-- -- ---
----- ----- - ---------- ---- ------- -- -------
---------- ----- --
--2. 携带 JWT 请求 API
客户端在请求 API 时，需要在请求头 Authorization 中附带 JWT。
以下是一个示例代码：
前端代码：
const headers = {
'Authorization': 'Bearer ' + localStorage.getItem('jwt')
}
const response = await axios.get('/api/users', {
headers
})后端代码：
-- -------------------- ---- -------
--------------------- --------------- ----- ----- ---- -- -
-- -- --- ------
----- ---- - ----- ---------------------------
-- ------
--------------
--
-- -- --- ----
-------- ------------------- ---- ----- -
----- ------ - ----------------------------
----- ----- - ------ -- -------------- -----
-- -------- -
------ ------------------------------------
-
----------------- ------- - ------ ------- - -- -
-- ------- -
------ ------------------------------------
-
-------- - -------
------
--
-3. JWT 的更新与注销
JWT 有一个过期时间（exp），当过期时间到达后，需要客户端重新获取 JWT。当用户需要注销时，需要删除客户端本地的 JWT。
以下是相关示例代码：
-- -------------------- ---- -------
-- -- ---
----- -------- - ----- -------------------------- ----- -
-------- -
---------------- ------- - - ---------------------------
-
--
-- --- ---
--------------------------- --------------------
-- -- ---
------------------------------总结
本文介绍了 JWT 的作用、使用方法以及在 RESTful API 中的应用。JWT 的优点之一是无状态，即服务器不需要存储任何 session 或 token，从而极大地减轻了服务器的负担。同时，JWT 也支持跨域使用，使得基于前端的 SPA 等应用的请求更加灵活，安全。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f35bb968c7c53b0148634