前端AES加密解密-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端AES加密解密。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前端经常会遇到这种接口和参数需要加密的情况，目前用的最多的就是aes加密了。以下就是操作步骤。以下方式适用各个前端框架，请自行根据框架修改对应语法

1.安装 `CryptoJS`

这个库就是用来加密的核心，直接打开项目终端，输入npm install crypto-js --save

2. 新建`crypto.js`

在@/src/utils/下新建crypto.js文件，代码如下: （注: 如果你和我的目录不同也无所谓，创建在任何地方都行，只要你引入的路径是对的就OK），

	// crypto.js 文件
	import CryptoJS from "crypto-js"
//秘钥, 建议设置其他的字符, 这里只是为了演示，一般长度是16位
var key = CryptoJS.enc.Latin1.parse("1234567890123456"); 
// 偏移量, 建议设置其他的字符, 这里只是为了演示，一般长度是16位
var iv = CryptoJS.enc.Latin1.parse("1234567890123456");  
export default {
	//加密
	encrypt(data) {
		var srcs = CryptoJS.enc.Utf8.parse(data);
		var encrypted = CryptoJS.AES.encrypt(srcs, key, {
			iv: iv,
			mode: CryptoJS.mode.CBC,
			padding: CryptoJS.pad.ZeroPadding
		});
		return encrypted.toString();
	},
	//解密
	decrypt(encrypted) { 
		var decrypted = CryptoJS.AES.decrypt(encrypted, key, {
			iv: iv,
			mode: CryptoJS.mode.CBC,
			padding: CryptoJS.pad.ZeroPadding
		});
		return decrypted.toString(CryptoJS.enc.Utf8);
	}
}

3. 引入`crypto.js`

在需要加密的页面引入crypto.js，代码如下：

	// 这是我的地址，你可以换成你的，只要是能引用到的就OK
	// index.vue
	import aec_secret from '../../utils/crypto';

4. 使用

	// index.vue
	import aec_secret from '../../utils/crypto';
	
	// 使用普通格式
	let str = '我是测试加密'
	// 加密
	console.log(aec_secret.encrypt(str))
	// 解密
	console.log(aec_secret.decrypt(aec_secret.encrypt(str)))
	
	let data = {
		name: '我是测试'
	}
	// 对象或者数据格式，注意：需要先JSON.stringify转一下。
	let enc = aec_secret.encrypt(JSON.stringify(data))
    // 解密, 注意：需要JSON.parse转一下，注意它的使用位置
    let dec = JSON.parse(aec_secret.decrypt(enc))
    console.log(dec)