在 Angular 应用程序中使用 JWT 插件进行身份验证
对于需要进行身份验证的应用程序，JSON Web Token（JWT）是一种非常流行的解决方案。在 Angular 应用程序中，我们可以使用一些库，例如 angular-jwt，来轻松地实现 JWT 身份验证。在本文中，我们将讨论如何将 JWT 插件集成到 Angular 应用程序中进行身份验证，并提供一个示例代码。
安装 Angular JWT
在开始之前，我们需要安装 angular-jwt。安装步骤如下：
在终端中导航到您的项目目录。
运行以下命令：
--- ------- ------------------
- 在您的 NgModule 中导入 JwtModule：
------ - -------- - ---- ----------------
------ - --------- - ---- ---------------------
-----------
-------- -
-------------------
------- -
------------ ---------
--------------- ------------------
-
--
--
-------- -----------
--
------ ----- ---------- --在这里，我们定义了一个 AuthModule，导入了 JwtModule。在模块中，我们调用 JwtModule.forRoot 并传递配置。tokenGetter 是一个必须的函数，它应该返回我们的 JWT。allowedDomains 是一个可选的参数，用于配置您所信任的域名。
JwtInterceptor
我们将使用 JwtInterceptor 来自动将 JWT 添加到请求标头中。以下是 JwtInterceptor 如何工作的示例代码：
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ------------ --------- - ---- -----------------------
------ - ---------- - ---- -------
------ - ----------- - ---- -----------------
-------------
------ ----- -------------- ---------- --------------- -
------------------- ------------ ------------ --
------------------ ----------------- ----- ------------- -------------------------- -
----- ----- - ----------------------------
-- ------- -
------- - ---------------
----------- -
-------------- ------- ---------
-
---
-
------ ---------------------
-
-在这里，我们拦截请求并检查是否存在 JWT。如果存在，我们就将其添加到请求标头中。在这里，我们将 Bearer 添加到 JWT 的前面以及一个空格。
AuthService
AuthService 是一个服务，用于从存储 JWT 并从中获取 JWT。在这里，我们将存储 JWT 保存在 localStorage 中。以下是示例代码：
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- ----------- -
------- -------- -------- - -------------
----------- ------ -
------ ------------------------------------
-
--------------- -------- ---- -
----------------------------------- -------
-
-------------- ---- -
---------------------------------------
-
-在这里，我们通过浏览器的 localStorage 存储 JWT。setToken 方法用于将 JWT 存储到 localStorage 中。getToken 方法用于获取 JWT，并将其添加到我们的请求标头中。removeToken 方法用于从 localStorage 中删除 JWT。
示例代码
最后，以下是一个在 Angular 应用程序中使用 JWT 插件进行身份验证的示例代码：
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ----------- - ---- -----------------
------------
--------- -----------
--------- -
------- --------------------------------
------- ----------------------------------
------- ----------------------- -------------
-
--
------ ----- ------------ -
------------------- ----- ----------- ------- ------------ ------------ --
------- -
-------------------------------------------- - ------ ------ -- -- -
-------------------------------------
---
-
-------- -
-------------------------------
-
--------- -
--------------------------------------------------
-
-在这里，我们定义了一个组件，并提供了三个按钮。在点击“Login”按钮后，我们将调用 /api/login，并将 JWT 存储在 localStorage 中。在点击“Logout”按钮后，我们将从 localStorage 中删除 JWT。在单击“Get Data”按钮后，我们将调用 /api/data，并完成我们的请求。
结论
在本文中，我们学习了如何使用 angular-jwt 插件集成 JWT 身份验证到 Angular 应用程序中。我们了解了如何安装和配置 JWT，如何使用 JwtInterceptor 并如何从 localStorage 存储 JWT。如果您正在编写需要进行身份验证的应用程序，这些知识点将为您提供指导。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671e0a792e7021665ef5525b