前端加密-aes-256-cbc(服务端是php,项目是用的vue)
最近有一个项目是接口都需要进行加密,采用的加密方法是aes-256-cbc的模式。网上查找了好多资料,也折腾了好久。终于弄好了。特此记录下。
首先安装crypto-js。 npm install crypto-js --save
然后定义2个方法,用于加密和解密。这里我将其命名为cryptoJS.js。放在utils文件夹下。具体代码如下:
import CryptoJS from "crypto-js"; /** * * 第一个参数word是待加密或者解密的字符串; * 第二个参数keyStr是aes加密需要用到的16位字符串的key; * 第三个参数是初始化向量 iv。 */ export default { // 加密 encrypt(word, keyStr, ivStr) { const key = CryptoJS.enc.Latin1.parse(keyStr); const iv = CryptoJS.enc.Latin1.parse(ivStr); const encoded = CryptoJS.AES.encrypt(word, key, { iv: iv, mode: CryptoJS.mode.CBC, adding: CryptoJS.pad.ZeroPadding }).toString() return encoded; }, // 解密 decrypt(word, keyStr, ivStr) { keyStr = keyStr; ivStr = ivStr; var key = CryptoJS.enc.Utf8.parse(keyStr); let iv = CryptoJS.enc.Utf8.parse(ivStr); var decrypt = CryptoJS.AES.decrypt(word, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.ZeroPadding }); return decrypt.toString(CryptoJS.enc.Utf8); } };
然后在需要使用加密方法的那个文件里先引入cryptoJS.js文件。如:import CryptoJS from '../utils/CryptoJS'
使用的时候:let cryData = CryptoJS.encrypt(paramsEncode, keyStr, hash) // 即为加密后的数据。其中paramsEncode是需要加密的数据、keyStr是加密时使用的key,与服务端一致、hash是偏移量,是一个随机生成的16位字符串。发送请求时需要将该偏移量与加密后的数据一起传递给服务端,由服务端完成解密工作。
随机生成字符串的方法:
const random = { randomString (len) { len = len || 32; var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/ var maxPos = $chars.length; var pwd = ''; for (var i = 0; i < len; i++) { pwd += $chars.charAt(Math.floor(Math.random() * maxPos)); } return pwd; } } export default random
作者:江峰★
出处:http://www.cnblogs.com/jf-67/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?