在前端开发中，认证和授权是非常重要的一部分。其中，JWT（JSON Web Token）是一种用于身份验证的标准。在 Angular 中使用 JWT 可以避免直接保存用户凭证，从而提高安全性。而 npm 包 ng-jwt 可以简化我们在 Angular 应用中使用 JWT 的流程。本文将介绍如何使用 ng-jwt 这个 npm 包及其相关技巧。
安装 ng-jwt
在项目根目录下，运行以下命令来安装 ng-jwt：
npm install ng-jwt --save
导入 JwtModule
在使用 ng-jwt 前，我们需要导入 JwtModule。在 app.module.ts 文件中：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - --------- - ---- ---------
-----------
-------- -
-- ---
-------------------
------- -
------------ -- -- -------------------------------------
--------------- ----------------
----------------- --------------------------
-
--
--
-- ---
--
------ ----- --------- - -这里我们使用 forRoot 方法来进行配置。其中 tokenGetter 是一个必选项，用来获取 JWT 令牌。在这个示例中，我们从 localStorage 中获取令牌。
allowedDomains 和 disallowedRoutes 是可选参数。如果要限制 JWT 令牌的使用范围，可设置 allowedDomains 列表；如果要例外某些没有令牌限制的路由，可设置 disallowedRoutes 列表。
在 HTTP 请求中使用 ng-jwt
在发送 HTTP 请求时，我们可以使用 ng-jwt 中提供的 HTTP 拦截器来自动添加 JWT 头。
在 app.module.ts 文件中：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ---------- ----------- - ---- ---------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
-----------------
-------------------
------- -
------------ -- -- ------------------------------------
-
--
--
------------- - ------------ --
---------- -
- -------- ------------ --------- ----------- --
- -------- ------------------ --------- --------------- ------ ---- -
--
---------- - ------------ -
--
------ ----- --------- - -这里，我们使用了 Angular 提供的 HTTP 模块，引入了 JwtInterceptor 拦截器。在 providers 列表中提供 JwtInterceptor 实例，就可以自动为 HTTP 请求添加 JWT 头了。
下面是一个使用 HTTP 拦截器的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
--------- -
------- -------- - ---- --------
-
--
------ ----- ------------ -
--------- ----
------------------- ----- ----------- --
---------- -
----------------------------------------------------------- -- -
------------- - -----
---
-
-现在，我们可以很方便地在发送请求时使用 ng-jwt 了。如果没有 JWT 头或 JWT 无效，将会得到一个 401 状态码的响应。我们可以根据这个状态码来进行后续处理。
检查 JWT 是否过期
在实际使用中，JWT 令牌有可能已经过期。过期的 JWT 无法通过验证，需要重新获取。
可以通过 JwtHelperService（ng-jwt 提供）来检查 JWT 的有效性。在 app.component.ts 中添加 JwtHelperService 的实例并使用它来检查 JWT：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- - ---- ---------
------------
--------- -----------
--------- -
---- -------------------------------------------- --------
---- ------------------------------------------- ---------
-
--
------ ----- ------------ ---------- ------ -
------ ------ - -------------------------------------
------------------ ---------- ----------------- --
---------- -
-- ---
-
-这里，我们在 ngOnInit 生命周期回调中使用了 JwtHelperService 来检查 JWT 令牌的有效性。如果令牌未过期，则显示 "JWT 有效"；否则显示 "JWT 已过期"。
总结
使用 ng-jwt 包，我们可以轻松地使用 JWT 令牌进行认证和授权。本文介绍了安装 ng-jwt、导入 JwtModule、使用 HTTP 拦截器、检查 JWT 是否过期等方面的内容。
ng-jwt 让我们可以更好地将 JWT 整合到 Angular 应用中，提高了开发效率、用户验证和安全性。我们应该熟练掌握其使用方法，以便在实际开发中充分发挥其优势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005670081e8991b448e3439