在前端开发中，经常需要处理用户身份认证的问题。其中，JWT（JSON Web Token）作为一种轻量级的认证方式，逐渐被越来越多的应用所采用。而 @tiangolo/angular-jwt 正是一个方便快捷的 Angular 组件，用于处理 JWT 的生成和解析。
安装和引入 @tiangolo/angular-jwt
要使用 @tiangolo/angular-jwt，我们需要先将其安装到本地环境中。在终端中输入以下命令：
--- ------- ------------------
安装完成后，我们需要将其引入到需要使用的组件中，例如：
------ - ---------------- - ---- ---------------------
JwtHelperService 方法使用
接下来，我们就可以使用 JwtHelperService 中的方法来处理 JWT 了。
parseJwt(jwt: string)
将 JWT 字符串解析成 JSON 对象。
----- --------- - --- ------------------- ----- ----- - -------------------------------------------------------------------------------------------------------------------------------------------------------------- ----- -------- - -------------------------- ---------------------- -- - ---- ------------- ----- ----- ----- ---- ---------- -
getTokenExpirationDate(token: string): Date | null
获取 JWT 的过期时间。如果 JWT 中未设置过期时间，返回 null。
----- --------- - --- ------------------- ----- ----- - -------------------------------------------------------------------------------------------------------------------------------------------------------------- ----- -------- - ---------------------------------------- ---------------------- -- ------------------------
isTokenExpired(token: string, offsetSeconds?: number): boolean
检查 JWT 是否过期。如果过期返回 true，否则返回 false。
----- --------- - --- ------------------- ----- ----- - -------------------------------------------------------------------------------------------------------------------------------------------------------------- ----- --------- - -------------------------------- ----------------------- -- -----
在 Angular 应用中使用
通常情况下，我们需要在调用 API 时将获取到的 JWT 加入到请求头中进行认证。可以在 Angular 的 HttpInterceptor 中使用 JwtHelperService 对请求进行前置处理：
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ------------ --------- - ---- -----------------------
------ - ---------- - ---- -------
------ - ---------------- - ---- ---------------------
-------------
------ ----- -------------- ---------- --------------- -
------------------- ---------- ----------------- - -
------------------ ----------------- ----- ------------- -------------------------- -
----- ----- - ------------------------------
-- ------ -- -------------------------------------- -
------- - ---------------
----------- -
-------------- ------- ---------
-
---
-
------ ---------------------
-
-以上代码会将本地存储中的 JWT 赋值给 Authorization 请求头，如：
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
--------- -
------- --------------
------- ----------- - ---- --------
-
--
------ ----- ------------ -
------------ ----
------------------- ----- ----------- --
---------- -
------------------------------------------------------ -- -
---------------- - -----
---
-
-结语
通过上方示例，我们可以看到 @tiangolo/angular-jwt 的使用是相当简单和方便的。在实际开发中，我们只需要了解这个包提供的方法，就可以轻松地使用 JWT 进行前端身份认证。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005601281e8991b448de121