如果您正在开发 Angular 应用程序并且需要使用 JSON Web Tokens（JWTs）进行身份验证，则可以使用 angular2-jwt-session npm 包。本文将提供有关如何使用该包的详细说明，包括说明其功能、如何安装和配置以及示例代码。
简介
angular2-jwt-session 是一个 Angular 2+ 插件，用于处理用户身份验证。它提供了一些基本的功能，如存储和检索 JWT、检查 JWT 的过期时间以及在过期时自动将用户重定向到登录页面。此外，它还提供了针对使用多个 JWT 的应用程序的 SessionService，使得能够轻松地管理它们。此插件使用 Angular HttpClient 来将 JWT 发送到服务器。
安装
使用 npm 安装该包：
npm install --save angular2-jwt-session
在您的 Angular 应用程序中使用它：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
-- ------ --- ----------------
------ - ---------------- - ---- -----------------------
-----------
------------- -
------------
--
-------- -
--------------
-- --- ---------------- -- --- -------
--------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -配置
使用 angular2-jwt-session，我们需要将它配置为我们的应用程序。首先，我们需要设置服务器地址、在 JWT 中使用的标头名称和带 JwtInterceptor 的请求管道。您可以通过传递一个 options 对象来做到这一点：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ----------- ----------- -
-- --- ---------
--------------------------------------------------------------
-- --- ------ ----
------------------------------------------
-- --- ------- --------
-----------------------------------
-
-您可以将这些设置放在任何地方。请注意，setServerUrl 和 setHeaderName 应在应用程序启动时设置，而 setJwtInterceptor 应在每次发出请求时设置。
使用
接下来，我们将向您展示如何在 Angular 组件中使用 angular2-jwt-session。
存储和检索 JWT
存储 JWT 是非常简单的。只需调用：
this.jwtSession.setSession(data.token);
此代码将 JWT 存储在浏览器的 localStorage 中。默认情况下，应将 JWT 存储在 sessionStorage 中，但是可以通过将第二个参数设置为 true 来更改这一点。检索 JWT 的过程也很简单：
const token = this.jwtSession.getToken();
检查 JWT 是否过期
要检查 JWT 是否过期，可以使用：
this.jwtSession.isTokenExpired();
如果 JWT 没有过期，则返回 false。如果 JWT 已过期，则返回 true。
自动重定向
angular2-jwt-session 还提供了一个自动重定向功能。如果您的应用程序使用 JWT 进行身份验证，并且 JWT 超时，您可以使用下面这段代码使用户自动重定向到登录页面：
if (this.jwtSession.isTokenExpired()) {
this.jwtSession.redirectToLogin();
}管理多个 JWT
如果您的应用程序需要使用多个 JWT（例如，从不同的身份验证服务器获得的 JWT），则可以使用 SessionService。SessionService 允许您轻松地在整个应用程序中管理多个会话。让我们看看如何使用它：
首先，您需要在 Angular 服务中注入它：
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------ - -------------- - ---- ----------------------- ------------- ----------- ------ -- ------ ----- ----------- - ------------------- --------------- --------------- - - -- --- -
要添加新的会话（即 JWT），您可以使用：
this.sessionService.addSession(name, token);
其中 name 是会话的名称，token 是 JWT。
要检索会话（即 JWT），您可以使用：
const token = this.sessionService.getSession(name);
要删除会话，您可以使用：
this.sessionService.removeSession(name);
示例代码
在这里，我将展示如何在 Angular 中使用 angular2-jwt-session。
首先，我们需要在 AuthComponent 中处理身份验证。要调用身份验证 REST API，我们使用 HttpClient。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- ----------- - ---- -----------------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- -
------------------- ----- ----------- ------- ----------- ----------- - -
-- ------ ---- --- ---- -- ---------
------------------ ------- --------- ------- -
----- --- - -------------------------------------
----- ----------- - -
-------- --- -------------
--------------- ------------------
--
--
----- ---- - -
--------- ---------
--------- --------
--
-- ---- --- ---- ------- -- --- -------------- ---
------------------- ----- -----------------------
------ ---- -- -
-- ---- --- --- -- --- -------
---------------------------------------
-- -------- -- --- ---- ----
-- --- --- --- ---- --- ------ ----
-------------------- - ----
--
------- -- -
-------------------
-
--
-
-在这个示例中，我们保存了 JWT 并将用户重定向到主页。
如果我们的组件需要 JWT 或用户未经身份验证就不能访问它，我们可以使用路由守卫。如果用户未经身份验证，路由守卫将重定向用户到登录页面。在下面这个示例中，我们将看到如何使用路由守卫：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------ ------ - ---- ------------------
------ - ---------- - ---- -----------------------
-------------
----------- ------
--
------ ----- --------- ---------- ----------- -
------------------- ------- ------- ------- ----------- ----------- - -
------------- -
----- ----- - ---------------------------
-- ------- -
------ -----
- ---- -
--------------------------------
------ ------
-
-
-在这个示例中，如果 JWT 不存在，守卫将重定向到 /auth。
结论
angular2-jwt-session 是一个非常有用的 Angular 插件，用于处理 JWT 身份验证。通过这篇文章，我们学习了如何安装、配置和使用该插件，以及如何在 Angular 应用程序中使用 JWT 进行身份验证。希望这篇文章能够帮助您更好地理解 angular2-jwt-session，并为您的 Angular 项目提供贡献。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560d881e8991b448df1ab