VUE 加密工具

最新推荐文章于 2025-06-11 09:49:54 发布

言玉gz

最新推荐文章于 2025-06-11 09:49:54 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue aes md5 crypto-jd

本文链接：https://blog.youkuaiyun.com/u010811939/article/details/84591132

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Crypto-JS进行AES和MD5加密解密操作，包括安装Crypto-JS、创建加密文件并提供具体代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用方法

先在vue项目中安装crypto-js

npm install crypto-js --save-dev

新建digest.js加密文件，代码如下

import CryptoJS from 'crypto-js';
/* 加密工具类 */
export const AES = {
  encrypt(data, secretKey) {
    let utf8Data = CryptoJS.enc.Utf8.parse(data);
    let utf8SecretKey  = CryptoJS.enc.Utf8.parse(secretKey);
    var encrypted = CryptoJS.AES.encrypt(utf8Data, utf8SecretKey, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
    return encrypted.toString();
  },
  decrypt(data, secretKey) {
    var utf8SecretKey  = CryptoJS.enc.Utf8.parse(secretKey);
    var decrypt = CryptoJS.AES.decrypt(data, utf8SecretKey, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
    return CryptoJS.enc.Utf8.stringify(decrypt).toString();
  }
}

export const MD5 = {
   encrypt(data) {
     return CryptoJS.MD5(data).toString();/* toString后会变成Hex 32位字符串*/
   }
}

export default {
  MD5,
  AES
}

使用方法

import digest from '@/utils/digest'
let testDigestMd5 = () => {
   let md5EncryptData = digest.MD5.encrypt("123456");
    console.info(`md5EncryptData : ${md5EncryptData}`);
    let aesEncryptData = digest.AES.encrypt("123456",'12345678')
    console.info(`aesEncryptData : ${aesEncryptData}`);
    let aesDecryptData = digest.AES.decrypt(aesEncryptData,'12345678');
    console.info(`aesDecryptData : ${aesDecryptData}`);
}

输出：
md5EncryptData : e10adc3949ba59abbe56e057f20f883e
aesEncryptData : 7FP0388LUA3VVswkk97NJA==
aesDecryptData : 123456