在前端开发中，许多时候我们需要对数据进行加密传输，以提高安全性。但是，对于初学者来说，加密技术可能比较高级，需要一定的技术积累和对算法的理解。为了方便开发者使用，社区就衍生出了许多工具和插件，其中一个比较常用的是 ng2-ajax-encrypt。本篇文章就将详细介绍如何使用这个 npm 包进行加密传输。
1. 什么是 ng2-ajax-encrypt？
ng2-ajax-encrypt 是一个 Angular2+ 的数据加密插件，它可以将 HTTP 请求中的数据进行加密传输，提高网络安全性。这个插件依赖于 CryptoJS 和 RxJS。
2. 如何安装和使用 ng2-ajax-encrypt？
安装最新版本的 ng2-ajax-encrypt 会自动安装 CryptoJS 和 RxJS。可以使用以下命令进行安装：
npm install --save ng2-ajax-encrypt
引入 ng2-ajax-encrypt 后，我们需要创建一个服务并在需要加密的 HTTP 请求中使用。创建服务需要用到 ng g service 命令：
ng g service HttpEncryptService
创建完成后在 HttpEncryptService 中引入 CryptoJS 和 ng2-ajax-encrypt：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -- -------- ---- ------------
------ - ----- ------------------- ----------- -------- - ---- ----------------
------ - ---------- - ---- ------------------
------ - ----------- - ---- -------------------
-------------
------ ----- ------------------ ------- ---- -
-------------
--------- -----------
--------- -------------------
-------- ------------ -----------
-- -
--------------- ---------
-
-CryptoJS：用于数据加（解）密。Http：由于Http存在多个重载方法，所以我们需要继承原有的Http。XHRBackend：用于替代默认的BrowserBackend。AjaxEncrypt：ng2-ajax-encrypt 的中间加密层。
接下来，我们需要在 app.module.ts 中将 Http 替换为 HttpEncryptService：
-- -------------------- ---- -------
------ - ------------------ - ---- -------------------------
-----------
------------- -
------------
--
-------- -
--------------
----------
--
---------- -
-
-------- -----
----------- --------- ----------- -------- ------------------- -- -
------ --- --------------------------- -------- --- -------------
---- -------------------
--- ------------------
----
--
----- ------------ -------------------
-
--
---------- --------------
--
------ ----- --------- - -在使用时，我们只需要在 Http 请求中加上 encrypt: true，即可实现加密传输：
this.http.post('http://localhost:4200/api/login', {
username: 'test',
password: '123456'
}, { encrypt: true }).subscribe((res: Response) => {
console.log(res.json());
});3. 示例代码
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -- -------- ---- ------------
------ - ----- ------------------- ----------- -------- - ---- ----------------
------ - ---------- - ---- ------------------
------ - ----------- - ---- -------------------
-------------
------ ----- ------------------ ------- ---- -
-------------
--------- -----------
--------- -------------------
-------- ------------ -----------
-- -
--------------- ---------
-
------------ ------ - -------- --------- -------------------- -------------------- -
-- -------- -- --------------- --- ----- -
------------ - -------------------------------------------------- --------------------- -
--- -------------------
---
-
------ ------------------ -------------
----- --------- -- -
-- ----------- --- --- -- ------- -- --------------- --- ----- -
------ ----------------------
-
------ ----
---------------------------
-
-------- ------- --------- -------------------- -------------------- -
-- -------- -- --------------- --- ----- -
------------ - -------------------------------------------------- --------------------- -
--- -------------------
---
-
------ -------------- -------------
----- --------- -- -
-- ----------- --- --- -- ------- -- --------------- --- ----- -
------ ----------------------
-
------ ----
---------------------------
-
--------- ------- ----- ---- --------- -------------------- -------------------- -
-- -------- -- --------------- --- ----- -
------------ - -------------------------------------------------- --------------------- -
--- -------------------
---
-
------ --------------- ----- -------------
----- --------- -- -
-- ----------- --- --- -- ------- -- --------------- --- ----- -
------ ----------------------
-
------ ----
---------------------------
-
-------- ------- ----- ---- --------- -------------------- -------------------- -
-- -------- -- --------------- --- ----- -
------------ - -------------------------------------------------- --------------------- -
--- -------------------
---
-
------ -------------- ----- -------------
----- --------- -- -
-- ----------- --- --- -- ------- -- --------------- --- ----- -
------ ----------------------
-
------ ----
---------------------------
-
------- ---------------- ---------- -------- -
------------ - --------------------------------------------- --------------------- -
--- -------------------
-------------------------------
------ ----
-
------- ------------------ --------- -
---------------------
------ ---------------------- -- ------- --------
-
-
4. 注意事项
- 由于中间加密层的存在，所以不要在
Intercepter中使用此插件，以免与加密解密流程冲突而不能正常加密或解密。 key和iv是加密解密中必须使用的两个参数，需要保证与后端协商一致。
通过以上步骤，我们就可以使用 ng2-ajax-encrypt 对 HTTP 数据进行加密传输，提高网络安全性。同时，这个插件的使用也给我们提供了一种思路，即可以通过 Angular 的依赖注入来扩展默认的 Http 请求，实现我们的需求。
5. 参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bde81e8991b448e58e4