vue crypto-js 数据加密与解密

vue 使用crypto-js加密与解密、后端加密与解密工具类

crypto-js介绍

CryptoJS是一个JavaScript的加解密的工具包。支持多种的算法：MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列，进行 AES、DES、Rabbit、RC4、Triple DES 加解密。具体内容与用法可阅读文档了解。
码云网址
crypto-js文档

vue安装crypto-js

npm install crypto-js
 或
 yarn add crypto-js
 

前端封装加解密

新建js文件crypto.js并放入src目录下，如

工具类文件内容

import CryptoJS from "crypto-js";// 后端进行加密解密时，keyStr与IvStr需要和后端保持一致
 const defaultKeyStr = "smLeGV63judEcxKU";
 const defaultIvStr = "lFbGSVuAmZqtPCLa";
 const defaultKey = CryptoJS.enc.Utf8.parse(defaultKeyStr);
 const defaultIv = CryptoJS.enc.Utf8.parse(defaultIvStr);export default {/*** 获取key* @param keyStr key字符串*/getKey(keyStr) {if (keyStr) {return CryptoJS.enc.Utf8.parse(keyStr);}return defaultKey;},/*** 获取iv* @param ivStr iv字符串* @returns {*}*/getIv(ivStr) {if (ivStr) {return CryptoJS.enc.Utf8.parse(ivStr);}return defaultIv;},/*** 加密* @param {*} word   加密前字符串* @param {*} keyStr key* @param {*} ivStr  iv* @return 加密后内容*/encrypt(word, keyStr, ivStr) {let key = this.getKey(keyStr);let iv = this.getIv(ivStr);let srcs = CryptoJS.enc.Utf8.parse(word);let encrypted = CryptoJS.AES.encrypt(srcs, key, {iv: iv,mode: CryptoJS.mode.CBC,padding: CryptoJS.pad.ZeroPadding});return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);},/*** 解密* @param {*} word    已加密字符串* @param {*} keyStr  key* @param {*} ivStr   iv* @return 解密结果*/decrypt(word, keyStr, ivStr) {let key = this.getKey(keyStr);let iv = this.getIv(ivStr);let base64 = CryptoJS.enc.Base64.parse(word);let src = CryptoJS.enc.Base64.stringify(base64);let decrypt = CryptoJS.AES.decrypt(src, key, {iv: iv,mode: CryptoJS.mode.CBC,padding: CryptoJS.pad.ZeroPadding});let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);return decryptedStr.toString();}
 }

后端对应加密解密工具类

pom文件引入包

org.bouncycastlebcprov-jdk15on1.60
 
 

加解密工具类

package com.ljc.base.common.base.utils;import lombok.extern.slf4j.Slf4j;
 import org.apache.tomcat.util.codec.binary.Base64;import javax.crypto.Cipher;
 import javax.crypto.spec.IvParameterSpec;
 import javax.crypto.spec.SecretKeySpec;/*** @author ljc* @version 1.0* @date 2023/1/25 16:27*/
 @Slf4j
 public class CryptoUtil {/**** key和iv值需要和前端一致*/public static final String KEY = "smLeGV63judEcxKU";public static final String IV = "lFbGSVuAmZqtPCLa";private CryptoUtil() {}/*** 加密方法** @param data 要加密的数据* @param key  加密key* @param iv   加密iv* @return 加密的结果（加密失败返回null）*/public static String encrypt(String data, String key, String iv) {try {//"算法/模式/补码方式"NoPadding PkcsPaddingCipher cipher = Cipher.getInstance("AES/CBC/NoPadding");int blockSize = cipher.getBlockSize();byte[] dataBytes = data.getBytes();int plaintextLength = dataBytes.length;if (plaintextLength % blockSize != 0) {plaintextLength = plaintextLength + (blockSize - (plaintextLength % blockSize));}byte[] plaintext = new byte[plaintextLength];System.arraycopy(dataBytes, 0, plaintext, 0, dataBytes.length);cipher.init(Cipher.ENCRYPT_MODE, new SecretKeySpec(key.getBytes(), "AES"), new IvParameterSpec(iv.getBytes()));byte[] encrypted = cipher.doFinal(plaintext);return new Base64().encodeToString(encrypted);} catch (Exception e) {log.error("加密异常", e);return null;}}/*** 解密方法** @param data 要解密的数据* @param key  解密key* @param iv   解密iv* @return 解密的结果（解密失败返回原始值）*/public static String desEncrypt(String data, String key, String iv) {try {byte[] encrypted = new Base64().decode(data);Cipher cipher = Cipher.getInstance("AES/CBC/NoPadding");cipher.init(Cipher.DECRYPT_MODE, new SecretKeySpec(key.getBytes(), "AES"), new IvParameterSpec(iv.getBytes()));byte[] original = cipher.doFinal(encrypted);return new String(original).trim();} catch (Exception e) {log.error("解密异常", e);return data;}}}

工具类的使用

前端加密，先在文件中导入工具类文件后进行使用

// 导入加密工具类
 import crypto from "../../utils/crypto";
 // 使用
 let password = crypto.encrypt(this.loginForm.password);
 

后端解密

password = CryptoUtil.desEncrypt(password, CryptoUtil.KEY,CryptoUtil.IV);