vue は crypto-js 暗号化と復号化、バックエンド暗号化と復号化ツールを使用します
crypto-js の概要
CryptoJS は、JavaScript 暗号化および復号化ツールキットです。さまざまなアルゴリズムをサポートします: MD5、SHA1、SHA2、SHA3、RIPEMD-160 ハッシュ、AES、DES、Rabbit、RC4、Triple DES 暗号化および復号化。特定の内容と使用法についてはドキュメントをお読みください。
コード クラウド URL
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 ファイルインポートパッケージ
<dependency>
<groupId>org.bouncycastle</groupId>
<artifactId>bcprov-jdk15on</artifactId>
<version>1.60</version>
</dependency>
暗号化および復号化ツール
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 PkcsPadding
Cipher 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);