vue3-封装AES(CryptoJS)前端加密解密通信

最新推荐文章于 2025-07-08 21:35:14 发布

fat_shady

最新推荐文章于 2025-07-08 21:35:14 发布

阅读量5.5k

点赞数 6

CC 4.0 BY-SA版权

文章标签：前端 vue.js 经验分享

本文链接：https://blog.csdn.net/fat_shady/article/details/129322195

项目场景：

防止数据被爬取，前后端传参接收参数需要加密处理，使用AES加密。主要使用CryptoJS库中的函数方法，加密：CryptoJS.AES.encrypt(), 解密：CryptoJS.AES.decrypt()。

代码实现

安装CryptoJS库：

npm install crypto-js

创建文件夹，@/utils/secret，引入CryptoJS库并封装加密解密函数方法：

import CryptoJS from 'crypto-js/crypto-js';
const key = CryptoJS.enc.Utf8.parse('123321'); // 密钥 后端提供
const iv = CryptoJS.enc.Utf8.parse(''); // 偏移量
/**
 * AES加密 ：字符串 key iv  返回base64
 */
export function Encrypt(word) {
   
   
  const srcs = CryptoJS.enc.Utf8.parse(word);
  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
   
   
    iv: iv,
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7,
  });
  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
}

/**
 * AES 解密 ：字符串 key iv  返回base64
 *  */
export function Decrypt(word) {
   
   
  const base64 = CryptoJS.enc.Base64.parse(word);
  const src = CryptoJS.enc