feat: API加密 前端已经实现RSA/SM2 AES/SM4

apps/web-antd/package.json

@@ -45,10 +45,8 @@
     "@vueuse/core": "catalog:",
     "ant-design-vue": "catalog:",
     "cropperjs": "^1.6.2",
-    "crypto-js": "^4.2.0",
     "dayjs": "catalog:",
     "echarts": "^5.5.1",
-    "jsencrypt": "^3.3.2",
     "lodash-es": "^4.17.21",
     "pinia": "catalog:",
     "tinymce": "^7.3.0",
@@ -58,7 +56,6 @@
     "vue3-colorpicker": "^2.3.0"
   },
   "devDependencies": {
-    "@types/crypto-js": "^4.2.2",
     "@types/lodash-es": "^4.17.12"
   }
 }

apps/web-antd/src/api/request.ts

@@ -3,6 +3,10 @@
  */
 
 import type { HttpResponse } from '@vben/request';
+import type {
+  BaseAsymmetricEncryption,
+  BaseSymmetricEncryption,
+} from '@vben/utils';
 
 import { BUSINESS_SUCCESS_CODE, UNAUTHORIZED_CODE } from '@vben/constants';
 import { useAppConfig } from '@vben/hooks';
@@ -15,26 +19,44 @@ import {
   stringify,
 } from '@vben/request';
 import { useAccessStore } from '@vben/stores';
+import {
+  AesEncryption,
+  decodeBase64,
+  encodeBase64,
+  randomStr,
+  RsaEncryption,
+} from '@vben/utils';
 
 import { message, Modal } from 'ant-design-vue';
 import { isEmpty, isNull } from 'lodash-es';
 
 import { useAuthStore } from '#/store';
-import {
-  decryptBase64,
-  decryptWithAes,
-  encryptBase64,
-  encryptWithAes,
-  generateAesKey,
-} from '#/utils/encryption/crypto';
-import * as encryptUtil from '#/utils/encryption/jsencrypt';
 
 import { handleUnauthorizedLogout } from './helper';
 
-const { apiURL, clientId, enableEncrypt } = useAppConfig(
-  import.meta.env,
-  import.meta.env.PROD,
-);
+const { apiURL, clientId, enableEncrypt, rsaPublicKey, rsaPrivateKey } =
+  useAppConfig(import.meta.env, import.meta.env.PROD);
+
+/**
+ * 使用非对称加密的实现 前端已经实现RSA/SM2
+ *
+ * 你可以使用Sm2Encryption来替换 后端也需要同步替换公私钥对
+ *
+ * 后端文件位置: ruoyi-common/ruoyi-common-encrypt/src/main/java/org/dromara/common/encrypt/filter/DecryptRequestBodyWrapper.java
+ *
+ * 注意前端sm-crypto库只能支持04开头的公钥! 否则加密会有问题 你可以使用前端的import { logSm2KeyPair } from '@vben/utils';方法来生成
+ * 如果你生成的公钥开头不是04 那么不能正常加密
+ * 或者使用这个网站来生成: https://tool.hiofd.com/sm2-key-gen/
+ */
+const asymmetricEncryption: BaseAsymmetricEncryption = new RsaEncryption({
+  publicKey: rsaPublicKey,
+  privateKey: rsaPrivateKey,
+});
+
+/**
+ * 对称加密的实现 AES/SM4
+ */
+const symmetricEncryption: BaseSymmetricEncryption = new AesEncryption();
 
 function createRequestClient(baseURL: string) {
   const client = new RequestClient({
@@ -120,15 +142,21 @@ function createRequestClient(baseURL: string) {
         encrypt &&
         ['POST', 'PUT'].includes(config.method?.toUpperCase() || '')
       ) {
-        const aesKey = generateAesKey();
-        config.headers['encrypt-key'] = encryptUtil.encrypt(
-          encryptBase64(aesKey),
-        );
+        // sm4这里改为randomStr(16)
+        const key = randomStr(32);
+        const keyWithBase64 = encodeBase64(key);
+        config.headers['encrypt-key'] =
+          asymmetricEncryption.encrypt(keyWithBase64);
+        /**
+         * axios会默认给字符串前后加上引号 RSA可以正常解密(加不加都能解密) 但是SM2不行(大坑!!!)
+         * 这里通过transformRequest强制返回原始内容
+         */
+        config.transformRequest = (data) => data;
 
         config.data =
           typeof config.data === 'object'
-            ? encryptWithAes(JSON.stringify(config.data), aesKey)
-            : encryptWithAes(config.data, aesKey);
+            ? symmetricEncryption.encrypt(JSON.stringify(config.data), key)
+            : symmetricEncryption.encrypt(config.data, key);
       }
       return config;
     },
@@ -145,13 +173,13 @@ function createRequestClient(baseURL: string) {
       const encryptKey = (response.headers ?? {})['encrypt-key'];
       if (encryptKey) {
         /** RSA私钥解密 拿到解密秘钥的base64 */
-        const base64Str = encryptUtil.decrypt(encryptKey);
+        const base64Str = asymmetricEncryption.decrypt(encryptKey);
         /** base64 解码 得到请求头的 AES 秘钥 */
-        const aesSecret = decryptBase64(base64Str.toString());
+        const secret = decodeBase64(base64Str);
         /** 使用aesKey解密 responseData */
-        const decryptData = decryptWithAes(
+        const decryptData = symmetricEncryption.decrypt(
           response.data as unknown as string,
-          aesSecret,
+          secret,
         );
         /** 赋值 需要转为对象 */
         response.data = JSON.parse(decryptData);

apps/web-antd/src/utils/encryption/crypto.ts

@@ -1,80 +0,0 @@
-import CryptoJS from 'crypto-js';
-
-function randomUUID() {
-  const chars = [
-    ...'0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
-  ];
-  const uuid = Array.from({ length: 36 });
-  let rnd = 0;
-  let r: number;
-  for (let i = 0; i < 36; i++) {
-    if (i === 8 || i === 13 || i === 18 || i === 23) {
-      uuid[i] = '-';
-    } else if (i === 14) {
-      uuid[i] = '4';
-    } else {
-      if (rnd <= 0x02)
-        rnd = Math.trunc(0x2_00_00_00 + Math.random() * 0x1_00_00_00);
-      r = rnd & 16;
-      rnd = rnd >> 4;
-      uuid[i] = chars[i === 19 ? (r & 0x3) | 0x8 : r];
-    }
-  }
-  return uuid.join('').replaceAll('-', '').toLowerCase();
-}
-
-/**
- * 随机生成aes 密钥
- *
- * @returns aes 密钥
- */
-export function generateAesKey() {
-  return CryptoJS.enc.Utf8.parse(randomUUID());
-}
-
-/**
- * base64编码
- * @param str
- * @returns base64编码
- */
-export function encryptBase64(str: CryptoJS.lib.WordArray) {
-  return CryptoJS.enc.Base64.stringify(str);
-}
-
-/**
- * 使用公钥加密
- * @param message 加密内容
- * @param aesKey aesKey
- * @returns 使用公钥加密
- */
-export function encryptWithAes(
-  message: string,
-  aesKey: CryptoJS.lib.WordArray,
-) {
-  const encrypted = CryptoJS.AES.encrypt(message, aesKey, {
-    mode: CryptoJS.mode.ECB,
-    padding: CryptoJS.pad.Pkcs7,
-  });
-  return encrypted.toString();
-}
-
-/**
- * 解密base64
- */
-export function decryptBase64(str: string) {
-  return CryptoJS.enc.Base64.parse(str);
-}
-
-/**
- * 使用密钥对数据进行解密
- */
-export function decryptWithAes(
-  message: string,
-  aesKey: CryptoJS.lib.WordArray,
-) {
-  const decrypted = CryptoJS.AES.decrypt(message, aesKey, {
-    mode: CryptoJS.mode.ECB,
-    padding: CryptoJS.pad.Pkcs7,
-  });
-  return decrypted.toString(CryptoJS.enc.Utf8);
-}

apps/web-antd/src/utils/encryption/jsencrypt.ts

@@ -1,31 +0,0 @@
-// 密钥对生成 http://web.chacuo.net/netrsakeypair
-import { useAppConfig } from '@vben/hooks';
-
-import JSEncrypt from 'jsencrypt';
-
-const { rsaPrivateKey, rsaPublicKey } = useAppConfig(
-  import.meta.env,
-  import.meta.env.PROD,
-);
-
-/**
- * 加密
- * @param txt 需要加密的数据
- * @returns 加密后的数据
- */
-export function encrypt(txt: string) {
-  const instance = new JSEncrypt();
-  instance.setPublicKey(rsaPublicKey);
-  return instance.encrypt(txt);
-}
-
-/**
- * 解密
- * @param txt 需要解密的数据
- * @returns 解密后的数据
- */
-export function decrypt(txt: string) {
-  const instance = new JSEncrypt();
-  instance.setPrivateKey(rsaPrivateKey);
-  return instance.decrypt(txt);
-}