(叁)前端实现加密的方式：AES 加密(实现的两种方式)
Ⅰ、AES 加密：1、使用 AES 加密前的准备工作：
其一、安装 crypto-js ：
A、安装命令：
npm install crypto-js
B、乐成安装后的截图：
// 在 package.json 文件内有安装后的依靠(但版本不一定是 ^4.2.0);
https://i-blog.csdnimg.cn/direct/8f4310077bed497798c8f16d5743f1c2.png
2、实现 AES 加密的方式一：
其一、在项目中创建 crypto.js 文件：
A、crypto.js 文件位置截图为：
https://i-blog.csdnimg.cn/direct/e3824630d3c8413eafb7781f62250989.png
B、代码为：
import CryptoJS from "crypto-js";
export default {
//随机生成指定数量的16进制key
generatekey(num) {
let library =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
let key = "";
for (var i = 0; i < num; i++) {
let randomPoz = Math.floor(Math.random() * library.length);
key += library.substring(randomPoz, randomPoz + 1);
}
return key;
},
//加密
encrypt(word, keyStr) {
keyStr = keyStr ? keyStr : "ylvector12345678"; //判断是否存在key，不存在就用定义好的key
var key = CryptoJS.enc.Utf8.parse(keyStr);
var srcs = CryptoJS.enc.Utf8.parse(word);
var encrypted = CryptoJS.AES.encrypt(srcs, key, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.toString();
},
//解密
decrypt(word, keyStr) {
keyStr = keyStr ? keyStr : "ylvector12345678";
var key = CryptoJS.enc.Utf8.parse(keyStr);
var decrypt = CryptoJS.AES.decrypt(word, key, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return CryptoJS.enc.Utf8.stringify(decrypt).toString();
}
};
其二、在页面中引入并使用：
A、在页面引入 crypto-js 文件：
// 注意：以实际引入的 crypto-js 文件地点为主;
https://i-blog.csdnimg.cn/direct/113384b567834de09e10eed653954ea8.png
B、使用的加密解密的过程：
a、随机十六位密匙的加密解密操作：
// 用AES给密码加密
const keys = Crypto.generatekey(16);//ylvector
//如果是对象/数组的话，需要先JSON.stringify转换成字符串，第二个值是加密的方式key
// const encrypts = Crypto.encrypt(username.value,'ylvector12345678');
const encrypts = Crypto.encrypt(username.value,keys);
// const decrypt = Crypto.decrypt(encrypts, 'ylvector12345678');
const decrypt = Crypto.decrypt(encrypts, keys);
console.log(username.value,1111111)
console.log(encrypts,222222)
console.log(decrypt,333333333);
b、随机十六位密匙的加密解密截图：
// 截图一：此时随机产生的生成值，不是固定值为：rKAq5sr4UrRdmDAr+8epHA==
https://i-blog.csdnimg.cn/direct/80434e69dc3444418313ddc4deea099a.png
// 截图二：此时随机产生的生成值，不是固定值为：3BVfDdolhXyB1E79iBQUzA==
https://i-blog.csdnimg.cn/direct/9c140cb1fdef4beb9b4a022eb2530688.png
c、固定十六位密匙的加密解密操作：
// 用AES给密码加密
// const keys = Crypto.generatekey(16);//ylvector
//如果是对象/数组的话，需要先JSON.stringify转换成字符串，第二个值是加密的方式key
const encrypts = Crypto.encrypt(username.value,'ylvector12345678');
// const encrypts = Crypto.encrypt(username.value,keys);
const decrypt = Crypto.decrypt(encrypts, 'ylvector12345678');
// const decrypt = Crypto.decrypt(encrypts, keys);
console.log(username.value,1111111)
console.log(encrypts,222222)
console.log(decrypt,333333333);
d、固定十六位密匙的加密解密截图：
// 此时无论怎么生成，固定的生成值为：zweKZ45kJyI6HASVc8DQSQ==
https://i-blog.csdnimg.cn/direct/2a83a35880c04a5fb2f253af46f06a7a.png
3、实现 AES 加密的方式二：
其一、在项目中创建 crypto.js 文件：
A、crypto.js 文件位置截图为：
https://i-blog.csdnimg.cn/direct/e3824630d3c8413eafb7781f62250989.png
B、代码为：
import CryptoJS from "crypto-js";
export default {
//加密
encode(str = ''){
// utf-8 转换
let message = CryptoJS.enc.Utf8.parse(str);
let secret_key = CryptoJS.enc.Utf8.parse("12345678ABCDEFGH");
let iv = CryptoJS.enc.Utf8.parse("ABCDEFGH12345678");
// Encrypt
var ciphertext = CryptoJS.AES.encrypt(message, secret_key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return ciphertext.toString();
},
//解密
decode(str = ''){
// utf-8 转换
let message = str;
let secret_key = CryptoJS.enc.Utf8.parse("12345678ABCDEFGH");
let iv = CryptoJS.enc.Utf8.parse("ABCDEFGH12345678");
// Decrypt
var ciphertext= CryptoJS.AES.decrypt(message.toString(), secret_key,{
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return ciphertext.toString(CryptoJS.enc.Utf8);
}
};
其二、在页面中引入并使用：
A、在页面引入 crypto-js 文件：
// 注意：以实际引入的 crypto-js 文件地点为主;
https://i-blog.csdnimg.cn/direct/a57a40da35d84cb99a54ebb0e1ced1d0.png
B、使用的加密解密的过程：
a、固定十六位密匙的加密解密操作：
// 用AES给密码加密
const encrypts = Crypto.encode(username.value);
// 用AES给密码解密
const decrypt = Crypto.decode(encrypts);
console.log(username.value,1111111)
console.log(encrypts,222222)
console.log(decrypt,333333333);
b、固定十六位密匙的加密解密截图：
// 此时无论怎么生成，固定的生成值为：SeaNt1TTsdmvw7u24Q99Ng==
https://i-blog.csdnimg.cn/direct/334bf1396be54036a3f31a8101cf8b67.png
Ⅱ、寄语：
非常荣幸能作为该文章专栏的博主，关于上述问题不懂的可以随时滴滴，一定会及时回复；
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]