前端使用加密（AES、MD5）

脑瓜不疼

已于 2022-11-08 16:39:47 修改

阅读量741

点赞数 2

文章标签：前端 javascript 开发语言

于 2022-07-06 16:57:50 首次发布

本文链接：https://blog.csdn.net/super__code/article/details/125642835

版权

最近又写到数据加密的问题，从简而言，意在通过加密算法让别人无法看到你不想让他看到的东西，小编有了解到关于md5和AES等加密，再跟大佬讨论的时候，大佬表示：md5严格来说不是加密的方式，而是一种编码方式，抱着一种学习的态度来研究下。

AES 加密解密

新建一个ase.js 文件

// 封装的工具类
// 引入crypto-js
import * as CryptoJS from 'crypto-js';
const key = CryptoJS.enc.Utf8.parse('0123456789ASDFGH'); //十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('ASDFGH0123456789'); //十六位十六进制数作为密钥偏移量 

// 导出加密方法
export function Encrypt(word) {
  const src = CryptoJS.enc.Utf8.parse(word);
  const encrypted = CryptoJS.AES.encrypt(src, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  return encrypted.ciphertext.toString().toUpperCase();
}

// 导出解密方法
export function Decrypt(word) {
  const encryptedHexStr = CryptoJS.enc.Hex.parse(word);
  const src = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  const decrypt = CryptoJS.AES.decrypt(src, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();
}

在项目中使用如下

// 引入方法供调用
import {Decrypt, Encrypt} from "@/utils/ase";


// 加密数据
const obj = {
   username: '张三',
   password: Encrypt('sexy')，// 对密码进行加密
}
console.log(obj)  //{username: '张三', password: 'B8CC483E2BAB1463B1126940DF9BD6BA'}


// 解密数据
 console.log(Decrypt(obj['password'])) // sexy

MD5 加密解密

MD5又叫MD5信息摘要算法，经常用于确保信息传输的完整性和一致性。从严格意义上来说，MD5并不是加密算法，只能是一种哈希算法或是叫做摘要算法。MD5算法对比普通的加密算法缺少了解密的过程，它无法从密文（散列值）反过来得到原文。

MD5共有6种加密方法：
1， hex_md5(value)
2， b64_md5(value)
3， str_md5(value)
4， hex_hmac_md5(key, data)
5， b64_hmac_md5(key, data)
6， str_hmac_md5(key, data)
（Hex–十六进制，Str–字符串，B64–base64位）

项目中使用（示例仅在 vue-cli搭建的项目）

// 先安装
npm install --save js-md5

//引入
import md5 from 'js-md5';
Vue.prototype.$md5 = md5;

// 使用
this.$md5('holle') // bcecb35d0a12baad472fbe0392bcc043