介绍
在一个实际的 Web 应用中，安全性是非常关键的，因为应用中会存在很多潜在的漏洞，比如跨站脚本攻击、SQL 注入等等。我们要对应用的所有层面进行防护，其中前端也是不可忽视的一个层面。
@angularlicious/security 是一个基于 Angular 框架的 npm 包，它提供了一些用于前端安全防护的工具和类。本篇文章将详细介绍如何使用它来保障前端应用的安全性。
安装
使用 npm 安装 @angularlicious/security：
npm install @angularlicious/security --save
使用
1. 引入模块
在 AppModule 中引入 SecurityModule 模块：
-- -------------------- ---- ------- ------ ---------- ---- ---------------- ------ --------------- ---- ---------------------------- ------ -------------- ---- ------------------ ------ ---------------- ---- --------------------------- ----------- -------- --------------- ------------- ---------------- ------------- --------------- ---------- --------------- -- ------ ----- --------- --
2. 使用 JwtInterceptor
在 Angular 应用中，我们可以使用 HttpInterceptor 对所有的请求进行拦截和修改。JwtInterceptor 是一个专门用来对请求添加 JSON Web Token（JWT）的拦截器。
添加 JWT
在需要添加 JWT 的请求中，使用 Authorization 头加入 JWT。JwtInterceptor 会自动为每次请求添加正确的 JWT。
-- -------------------- ---- -------
------ ----------- ---- ----------------
------ ------------ ---- -----------------------
------------
--------- -----------
--------- --------------
--
------ ----- ------------ -
------------------- ----- ----------- --
---------- -
-- ----
------------------------------------------- -- -------------------
-
-配置 JwtInterceptor
在 app.module 中提供 JwtInterceptor：
-- -------------------- ---- -------
------ ---------- ---- ----------------
------ --------------- ---- ----------------------------
------ -------------- ---- ------------------
------ ---------------- --------------- ---- ---------------------------
------ ------------------- ---- -----------------------
-----------
-------- --------------- ------------- ----------------
------------- ---------------
---------- ---------------
---------- -
-- -- --------------
-
-------- ------------------
--------- ---------------
------ -----
--
--
--
------ ----- --------- --3. 使用 JwtHelperService
在前端 Angular 应用中，我们需要在一些场景中通过 JWT 来获取一些信息，比如用户的 ID、名称和权限等等。这时我们可以使用 JwtHelperService，它提供了一些工具类方便我们使用 JWT。
使用 JwtHelperService 获取用户信息
-- -------------------- ---- -------
------ ----------- ---- ----------------
------ ------------------ ---- ---------------------------
------------
--------- -----------
--------- --------------------------
--
------ ----- ------------ -
--------- -------
------------------- ---------- ----------------- --
---------- -
----- ----- - ----------------------------------
------------- - ------------------------
-
------------------ -------- ------ -
----- ------------ - ----------------------------------
------ ----- --- ----------------------- ----- --------------------- ----------- ----------------------------
-
-4. 使用 Guard
AuthGuard 是一个专门用来保护路由的 Guard。它将对每一个需要保护的路由进行拦截，在用户未登录的情况下，强制跳转登录页面。
配置路由
在路由模块中，配置需要保护的路由，使用 AuthGuard 进行保护。
-- -------------------- ---- -------
------ ---------- ---- ----------------
------ -------------- ---- ------------------
------ ----------- ---- ---------------------------
------ ---------------- ---- -------------------------------
------ -------------------- ---- -----------------------------------
-----------
-------- -
----------------------
------ -------- ---------- ----------------
------ ------------ ---------- ------------------- ------------ -------------
---
--
-------- ---------------
--
------ ----- ---------------- --配置 AuthGuard
在 app.module 中提供 AuthGuard：
-- -------------------- ---- ------- ------ ---------- ---- ---------------- ------ --------------- ---- ---------------------------- ------ -------------- ---- ------------------ ------ ---------------- ---------- ---- --------------------------- ----------- -------- --------------- ------------- ---------------- ------------- --------------- ---------- --------------- ---------- ------------ -- -- --------- -- ------ ----- --------- --
总结
@angularlicious/security 提供了一些非常有用的工具类和模块，帮助我们更好地保护前端应用的安全性。本文中介绍了如何使用 JwtInterceptor、JwtHelperService 和 AuthGuard 三个模块来实现 JWT 的拦截、使用和路由保护。希望本文可以对使用 @angularlicious/security 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f87238a385564ab6d23