0


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);exportdefault{/**
     * 获取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文件引入包

<dependency><groupId>org.bouncycastle</groupId><artifactId>bcprov-jdk15on</artifactId><version>1.60</version></dependency>

加解密工具类

packagecom.ljc.base.common.base.utils;importlombok.extern.slf4j.Slf4j;importorg.apache.tomcat.util.codec.binary.Base64;importjavax.crypto.Cipher;importjavax.crypto.spec.IvParameterSpec;importjavax.crypto.spec.SecretKeySpec;/**
 * @author ljc
 * @version 1.0
 * @date 2023/1/25 16:27
 */@Slf4jpublicclassCryptoUtil{/***
     * key和iv值需要和前端一致
     */publicstaticfinalStringKEY="smLeGV63judEcxKU";publicstaticfinalStringIV="lFbGSVuAmZqtPCLa";privateCryptoUtil(){}/**
     * 加密方法
     *
     * @param data 要加密的数据
     * @param key  加密key
     * @param iv   加密iv
     * @return 加密的结果(加密失败返回null)
     */publicstaticStringencrypt(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 =newbyte[plaintextLength];System.arraycopy(dataBytes,0, plaintext,0, dataBytes.length);

            cipher.init(Cipher.ENCRYPT_MODE,newSecretKeySpec(key.getBytes(),"AES"),newIvParameterSpec(iv.getBytes()));byte[] encrypted = cipher.doFinal(plaintext);returnnewBase64().encodeToString(encrypted);}catch(Exception e){
            log.error("加密异常", e);returnnull;}}/**
     * 解密方法
     *
     * @param data 要解密的数据
     * @param key  解密key
     * @param iv   解密iv
     * @return 解密的结果(解密失败返回原始值)
     */publicstaticStringdesEncrypt(String data,String key,String iv){try{byte[] encrypted =newBase64().decode(data);Cipher cipher =Cipher.getInstance("AES/CBC/NoPadding");

            cipher.init(Cipher.DECRYPT_MODE,newSecretKeySpec(key.getBytes(),"AES"),newIvParameterSpec(iv.getBytes()));byte[] original = cipher.doFinal(encrypted);returnnewString(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);

本文转载自: https://blog.csdn.net/qq_41995299/article/details/128824422
版权归原作者 走在菜鸟路上 所有, 如有侵权,请联系我们删除。

“vue crypto-js 数据加密与解密”的评论:

还没有评论