JSON Web Tokens (JWT) 是一种开放标准，用于在网络应用程序之间安全地传输信息。在 Angular 中，我们可以使用 JWT 来实现身份验证和授权。
JWT 工作原理
JWT 由三部分组成：头部、载荷和签名。头部包含加密算法和类型信息，载荷包含要传输的数据，签名用于验证数据的完整性。
在身份验证中，用户在登录时提供用户名和密码。服务器验证这些凭据并生成一个 JWT。然后，服务器将 JWT 发送回客户端。客户端将 JWT 存储在本地，并在每个后续请求中将其发送回服务器。服务器使用密钥验证 JWT 的签名，并从 JWT 中提取用户信息。如果 JWT 有效且已被签名，则用户被授权执行请求。
在 Angular 中使用 JWT
要在 Angular 中使用 JWT，我们需要使用一个库来生成和验证 JWT。一个流行的库是 jsonwebtoken。
首先，我们需要安装 jsonwebtoken 库：
npm install jsonwebtoken
然后，我们可以在 Angular 服务中使用该库来生成和验证 JWT。
生成 JWT
在登录成功后，我们可以使用以下代码生成 JWT：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- - ---- ---------------------
------ - -- --- ---- ---------------
-------------
----------- ------
--
------ ----- ----------- -
------- --------- - --- -------------------
------- --------- - --------------
------------------- ----- ------ -
----- ------- - - --------- -------------- ----- --------- --
------ ----------------- ----------------
-
-在上面的代码中，我们使用 jsonwebtoken 库的 sign 方法来生成 JWT。我们将 payload 对象传递给 sign 方法，并使用 secretKey 进行签名。生成的 JWT 将返回给调用方。
验证 JWT
在每个后续请求中，我们需要验证 JWT。我们可以使用以下代码验证 JWT：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- - ---- ---------------------
------ - -- --- ---- ---------------
-------------
----------- ------
--
------ ----- ----------- -
------- --------- - --- -------------------
------- --------- - --------------
------------------ ------- -
----- ----- - ----------------------------
-- ------ -- -------------------------------------- -
--- -
----------------- ----------------
------ -----
- ----- ----- -
-------------------
-
-
------ ------
-
-在上面的代码中，我们首先从本地存储中获取 JWT。然后，我们使用 jsonwebtoken 库的 verify 方法验证 JWT 的签名。如果签名有效，则返回 true，否则返回 false。
在 HTTP 请求中发送 JWT
在每个 HTTP 请求中，我们需要将 JWT 发送到服务器。我们可以使用 Angular 的 HttpInterceptor 来自动将 JWT 添加到请求标头中。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ----------- - ---- -----------------------
-------------
------ ----- -------------- ---------- --------------- -
------------------ ----------------- ----- ------------ -
----- ----- - ----------------------------
-- ------- -
------- - ---------------
----------- -
-------------- ------- ---------
-
---
-
------ ---------------------
-
-在上面的代码中，我们将 JWT 添加到请求标头中的 Authorization 字段中。
结论
在 Angular 中使用 JWT 可以实现身份验证和授权。我们可以使用 jsonwebtoken 库来生成和验证 JWT。我们还可以使用 HttpInterceptor 来自动将 JWT 添加到 HTTP 请求中。
使用 JWT 可以提高应用程序的安全性，因为它可以防止未经授权的访问和数据泄露。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67444db3c22b09372b12c78b