IT评测·应用市场-qidao123.com技术社区

标题: (叁)前端实现加密的方式：AES 加密(实现的两种方式) [打印本页]

---

作者: 滴水恩情    时间: 2025-3-20 07:29
标题: (叁)前端实现加密的方式：AES 加密(实现的两种方式)
Ⅰ、AES 加密：

1、使用 AES 加密前的准备工作：

其一、安装 crypto-js ：

A、安装命令：

npm install crypto-js
B、乐成安装后的截图：

// 在 package.json 文件内有安装后的依靠(但版本不一定是 ^4.2.0);

2、实现 AES 加密的方式一：

其一、在项目中创建 crypto.js 文件：

A、crypto.js 文件位置截图为：

B、代码为：

3. import CryptoJS from "crypto-js";
5. export default {
6.   //随机生成指定数量的16进制key
7.   generatekey(num) {
8.     let library =
9.       "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
10.     let key = "";
11.     for (var i = 0; i < num; i++) {
12.       let randomPoz = Math.floor(Math.random() * library.length);
13.       key += library.substring(randomPoz, randomPoz + 1);
14.     }
15.     return key;
16.   },
18.   //加密
19.   encrypt(word, keyStr) {
20.     keyStr = keyStr ? keyStr : "ylvector12345678"; //判断是否存在key，不存在就用定义好的key
21.     var key = CryptoJS.enc.Utf8.parse(keyStr);
22.     var srcs = CryptoJS.enc.Utf8.parse(word);
23.     var encrypted = CryptoJS.AES.encrypt(srcs, key, {
24.       mode: CryptoJS.mode.ECB,
25.       padding: CryptoJS.pad.Pkcs7
26.     });
27.     return encrypted.toString();
28.   },
29.   
30.   //解密
31.   decrypt(word, keyStr) {
32.     keyStr = keyStr ? keyStr : "ylvector12345678";
33.     var key = CryptoJS.enc.Utf8.parse(keyStr);
34.     var decrypt = CryptoJS.AES.decrypt(word, key, {
35.       mode: CryptoJS.mode.ECB,
36.       padding: CryptoJS.pad.Pkcs7
37.     });
38.     return CryptoJS.enc.Utf8.stringify(decrypt).toString();
39.   }
40. };

复制代码

其二、在页面中引入并使用：

A、在页面引入 crypto-js 文件：

// 注意：以实际引入的 crypto-js 文件地点为主;

B、使用的加密解密的过程：

a、随机十六位密匙的加密解密操作：

3.     // 用AES给密码加密
4.     const keys = Crypto.generatekey(16);//ylvector
5.     //如果是对象/数组的话，需要先JSON.stringify转换成字符串，第二个值是加密的方式key
6.     // const encrypts = Crypto.encrypt(username.value,'ylvector12345678');
7.     const encrypts = Crypto.encrypt(username.value,keys);
9.     // const decrypt = Crypto.decrypt(encrypts, 'ylvector12345678');
10.     const decrypt = Crypto.decrypt(encrypts, keys);
13.     console.log(username.value,1111111)
14.     console.log(encrypts,222222)
15.     console.log(decrypt,333333333);

复制代码

b、随机十六位密匙的加密解密截图：

// 截图一：此时随机产生的生成值，不是固定值为：rKAq5sr4UrRdmDAr+8epHA==

// 截图二：此时随机产生的生成值，不是固定值为：3BVfDdolhXyB1E79iBQUzA==

c、固定十六位密匙的加密解密操作：

3.      // 用AES给密码加密
4.      // const keys = Crypto.generatekey(16);//ylvector
5.      //如果是对象/数组的话，需要先JSON.stringify转换成字符串，第二个值是加密的方式key
6.      const encrypts = Crypto.encrypt(username.value,'ylvector12345678');
7.      // const encrypts = Crypto.encrypt(username.value,keys);
9.      const decrypt = Crypto.decrypt(encrypts, 'ylvector12345678');
10.      // const decrypt = Crypto.decrypt(encrypts, keys);
13.      console.log(username.value,1111111)
14.      console.log(encrypts,222222)
15.      console.log(decrypt,333333333);

复制代码

d、固定十六位密匙的加密解密截图：

// 此时无论怎么生成，固定的生成值为：zweKZ45kJyI6HASVc8DQSQ==

3、实现 AES 加密的方式二：

其一、在项目中创建 crypto.js 文件：

A、crypto.js 文件位置截图为：

B、代码为：

3. import CryptoJS from "crypto-js";
5. export default {
6.   //加密
7.   encode(str = ''){
8.     // utf-8 转换
9.     let message = CryptoJS.enc.Utf8.parse(str);
10.     let secret_key = CryptoJS.enc.Utf8.parse("12345678ABCDEFGH");
11.     let iv = CryptoJS.enc.Utf8.parse("ABCDEFGH12345678");
12.     // Encrypt
13.     var ciphertext = CryptoJS.AES.encrypt(message, secret_key, {
14.         iv: iv,
15.         mode: CryptoJS.mode.CBC,
16.         padding: CryptoJS.pad.Pkcs7
17.     });
18.     return ciphertext.toString();
19.   },
20.   
21.   //解密
22.   decode(str = ''){
23.     // utf-8 转换
24.     let message = str;
25.     let secret_key = CryptoJS.enc.Utf8.parse("12345678ABCDEFGH");
26.     let iv = CryptoJS.enc.Utf8.parse("ABCDEFGH12345678");
27.    
28.     // Decrypt
29.     var ciphertext  = CryptoJS.AES.decrypt(message.toString(), secret_key,{
30.         iv: iv,
31.         mode: CryptoJS.mode.CBC,
32.         padding: CryptoJS.pad.Pkcs7
33.     });
34.     return ciphertext.toString(CryptoJS.enc.Utf8);
35.   }
36. };

复制代码

其二、在页面中引入并使用：

A、在页面引入 crypto-js 文件：

// 注意：以实际引入的 crypto-js 文件地点为主;

B、使用的加密解密的过程：

a、固定十六位密匙的加密解密操作：

2.      // 用AES给密码加密
3.      const encrypts = Crypto.encode(username.value);
5.      // 用AES给密码解密
6.      const decrypt = Crypto.decode(encrypts);
8.      console.log(username.value,1111111)
9.      console.log(encrypts,222222)
10.      console.log(decrypt,333333333);

复制代码

b、固定十六位密匙的加密解密截图：

// 此时无论怎么生成，固定的生成值为：SeaNt1TTsdmvw7u24Q99Ng==

Ⅱ、寄语：

非常荣幸能作为该文章专栏的博主，关于上述问题不懂的可以随时滴滴，一定会及时回复；

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4