随着前端技术的迅速发展，越来越多的应用程序开始采用前后端分离的架构。而在这种架构下，前端应用程序所需要的鉴权和权限验证功能就变得尤为重要。而 ng2-jwtauth 就是一款针对 Angular2 应用程序的 JWT 鉴权和权限验证库，在保证安全性的前提下提供了便捷的鉴权和权限验证功能。
安装 ng2-jwtauth
首先，我们需要在项目中安装 ng2-jwtauth。在命令行中输入以下命令即可：
--- ------- -----------
使用 ng2-jwtauth
在安装完 ng2-jwtauth 后，我们需要在应用程序中引入相关的模块。在 app.module.ts 文件中，我们需要添加如下代码：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - --------- - ---- --------------
-----------
-------- --------------- -------------------
--------- -- -- ------------------------------------
----
---------- --------------
--
------ ----- --------- - -在这段代码中，我们首先引入了 BrowserModule 和 JwtModule，然后在 imports 中配置了 JwtModule。在我们使用 ng2-jwtauth 进行鉴权和权限验证时，我们需要在 HTTP 请求头中添加 JWT 令牌。getToken 函数则负责从本地存储中获取令牌。
在引入了 JwtModule 后，我们就可以在组件中使用相关的指令和服务了。例如，在 UserService 中我们可以使用 JwtService 来添加令牌：
------ - ---------- - ---- ----------------
------ - ---------- - ---- --------------
-------------
------ ----- ----------- -
------- -------- - -------------
------------------- ----------- ----------- - -
--------------- ------- --------- ------- -
------ ----------------------------- - --------- --------- --------- -------- --
--------------- --------- -- -
--- ----- - --------------- -- ----------------------
-- ------- -
---------------------------------
-
---
-
-在这个示例中，我们在登录的时候从返回结果中获取 JWT 令牌，并使用 JwtService 保存令牌到本地存储中。
除了保存令牌外，我们还可以使用 JwtService 来解析令牌的信息。例如，在 HeaderComponent 中我们可以使用 UserInfoDirective 来获取用户信息：
------ - --------- - ---- ----------------
------ - ----------- ----------------- - ---- --------------
------------
--------- ------------
--------- ---------------
--
------ ----- --------------- -
------- --------- -------
------------------- ----------- ----------- ------- ------------------ ------------------ -
------------- - -------------------------------------
-
-在这个示例中，我们通过在模板中绑定 {{userInfo}} 来显示用户信息。而在代码中，我们则使用 UserInfoDirective 来获取用户信息。这个指令会从本地存储中获取 JWT 令牌，并解析出其中包含的用户信息。
总结
通过本篇文章的介绍，我们可以看到 ng2-jwtauth 在 Angular2 应用程序中提供了便捷的 JWT 鉴权和权限验证功能。通过使用 ng2-jwtauth，我们可以在保证安全性的前提下，快速地添加鉴权和权限验证功能，并在应用程序中方便地使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559e481e8991b448d7846