使用jsencrypt实现请求接口参数加密功能, 可在.env全局开启, 也可在指定接口单独开启.

.env.development

@@ -7,6 +7,9 @@ VITE_APP_ENV = 'development'
 # 开发环境
 VITE_APP_BASE_API = '/dev-api'
 
+# 请求接口是否加密
+VITE_APP_IS_ENCRYPT = false
+
 # 应用访问路径 例如使用前缀 /admin/
 VITE_APP_CONTEXT_PATH = '/'
 

.env.production

@@ -4,6 +4,10 @@ VITE_APP_TITLE = RuoYi-Vue-Plus多租户管理系统
 # 生产环境配置
 VITE_APP_ENV = 'production'
 
+
+# 请求接口是否加密
+VITE_APP_IS_ENCRYPT = false
+
 # 应用访问路径 例如使用前缀 /admin/
 VITE_APP_CONTEXT_PATH = '/'
 

package.json

@@ -23,6 +23,7 @@
     "animate.css": "4.1.1",
     "await-to-js": "^3.0.0",
     "axios": "^1.3.4",
+    "crypto-js": "^4.1.1",
     "echarts": "5.4.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",
@@ -42,6 +43,7 @@
   "devDependencies": {
     "@iconify/json": "^2.2.40",
     "@intlify/unplugin-vue-i18n": "0.8.2",
+    "@types/crypto-js": "^4.1.1",
     "@types/file-saver": "2.0.5",
     "@types/js-cookie": "3.0.3",
     "@types/node": "18.14.2",

src/utils/aes.ts

@@ -0,0 +1,37 @@
+import CryptoJS from 'crypto-js';
+
+/**
+ * 随机生成32位的字符串
+ * @returns {string}
+ */
+const generateRandomString = () => {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let result = '';
+  const charactersLength = characters.length;
+  for (let i = 0; i < 32; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+};
+
+/**
+ * 随机生成aes 密钥
+ * @returns {string}
+ */
+export const generateAesKey = () => {
+  return CryptoJS.enc.Utf8.parse(generateRandomString());
+};
+
+/**
+ * 使用密钥对数据进行加密
+ * @param message
+ * @param aesKey
+ * @returns {string}
+ */
+export const 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();
+};

src/utils/request.ts

@@ -8,6 +8,9 @@ import { errorCode } from '@/utils/errorCode';
 import { LoadingInstance } from 'element-plus/es/components/loading/src/loading';
 import FileSaver from 'file-saver';
 import { getLanguage } from '@/lang';
+import { encryptWithAes, generateAesKey } from '@/utils/aes';
+import { encrypt } from '@/utils/jsencrypt';
+import CryptoJS from 'crypto-js';
 
 let downloadLoadingInstance: LoadingInstance;
 // 是否显示重新登录
@@ -29,6 +32,8 @@ service.interceptors.request.use(
     const isToken = (config.headers || {}).isToken === false;
     // 是否需要防止数据重复提交
     const isRepeatSubmit = (config.headers || {}).repeatSubmit === false;
+    // 是否需要加密
+    const isEncrypt = (config.headers || {}).isEncrypt === 'true' || import.meta.env.VITE_APP_IS_ENCRYPT === 'true';
     if (getToken() && !isToken) {
       config.headers['Authorization'] = 'Bearer ' + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
     }
@@ -63,6 +68,13 @@ service.interceptors.request.use(
         }
       }
     }
+    // 当开启参数加密
+    if (isEncrypt && (config.method === 'post' || config.method === 'put')) {
+      // 生成一个 AES 密钥
+      const aesKey = generateAesKey();
+      config.headers['AES'] = encrypt(aesKey.toString(CryptoJS.enc.Base64));
+      config.data = typeof config.data === 'object' ? encryptWithAes(JSON.stringify(config.data), aesKey) : encryptWithAes(config.data, aesKey);
+    }
     // FormData数据去请求头Content-Type
     if (config.data instanceof FormData) {
       delete config.headers['Content-Type'];