vue项目之前端CryptoJS加密、解密代码示例
更新时间:2024年11月04日 09:58:11 作者:大个个个个个儿
在Vue项目中集成CryptoJS进行数据加密,首先需要通过npm安装CryptoJS安装包,然后在项目文件中引入CryptoJS,文中通过代码介绍的非常详细,需要的朋友可以参考下
1、vue项目需要安装CryptoJS安装包
npm install crypto-js
2、在项目中引入CryptoJS
import CryptoJS from 'crypto-js'
3、使用,代码如下
// 此处key为16进制 let key = 'jiajiajiajiajiajiajiajia'; console.log('密钥:', key); // key格式化处理 key = CryptoJS.enc.Utf8.parse(key) // 偏移量长度为16位, 注:偏移量需要与后端定义好,保证一致 let iv = "37fa77f6a3b0462d"; iv = CryptoJS.enc.Utf8.parse("37fa77f6a3b0462d"); // 加密内容 const source = { "username": "用户名", "password": "密码", "timestamp": new Date().getTime() } const content = JSON.stringify(source); console.log('加密前:', source); // 加密方法 const encryptedContent = CryptoJS.AES.encrypt(content, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }) const encStr = encryptedContent.ciphertext.toString() console.log("加密后:", encStr); // 解密方法 const decryptedContent = CryptoJS.AES.decrypt(CryptoJS.format.Hex.parse(encStr), key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }) console.log('解密:',CryptoJS.enc.Utf8.stringify(decryptedContent));
总结
到此这篇关于vue项目之前端CryptoJS加密、解密的文章就介绍到这了,更多相关前端CryptoJS加密、解密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
基于vue-upload-component封装一个图片上传组件的示例
这篇文章主要介绍了基于vue-upload-component封装一个图片上传组件的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-10-10vue3获取ref实例结合ts的InstanceType问题
这篇文章主要介绍了vue3获取ref实例结合ts的InstanceType问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-03-03
最新评论