feat: 部分接口响应加密

src/components/list/list-policy-item.vue

@@ -7,7 +7,7 @@
       <p class="mb-[16px] text-lg font-semibold text-[#1a1a1a]">{{ detail.title }}</p>
       <div class="mb-[17px] flex h-[22px] flex-wrap overflow-hidden">
         <span
-          v-for="item in detail.industryList.split(',')"
+          v-for="item in detail.industryList?.split(',') || []"
           :key="item"
           class="mb-2 mr-[13px] bg-[rgba(44,104,255,0.08)] px-3 text-sm leading-[22px] text-[#2C68FF]"
         >

src/composable/useCrypto.ts

+import { publicKey } from '@/utils/constant.ts';
+import JSEncrypt from 'jsencrypt';
+import CryptoJS from 'crypto-js';
+import { computed, ref } from 'vue';
+
+/**
+ * 生成uuid
+ */
+export function genUUID(strLength = 16) {
+  let code = '';
+  const chars = 'abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789';
+  const charsArr = chars.split('');
+
+  for (let i = 0; i < strLength; i++) {
+    const num = Math.floor(Math.random() * charsArr.length);
+    code += charsArr[num];
+  }
+  return code;
+}
+
+/**
+ * 加解密
+ */
+export function useCrypto() {
+  const aesKey = ref(genUUID());
+  const parsedKey = CryptoJS.enc.Utf8.parse(aesKey.value);
+
+  const getAesOptions = computed(() => {
+    return {
+      mode: CryptoJS.mode.CBC,
+      padding: CryptoJS.pad.Pkcs7,
+      iv: parsedKey,
+    };
+  });
+
+  /** 生成header传递的密文 */
+  const getHeaderKey = computed(() => {
+    const encrypt = new JSEncrypt();
+    encrypt.setPublicKey(publicKey);
+    return encrypt.encrypt(aesKey.value).toString();
+  });
+
+  /** 解密 */
+  const decrypt = (content: string) => {
+    const words = CryptoJS.AES.decrypt(content, parsedKey, getAesOptions.value);
+    const result = CryptoJS.enc.Utf8.stringify(words);
+    return result ? JSON.parse(result) : null;
+  };
+
+  return {
+    getHeaderKey,
+    decrypt,
+  };
+}

src/composable/useRequest.ts

@@ -5,7 +5,10 @@ import type { AxiosRequestConfig } from 'axios';
 import CryptoJS from 'crypto-js';
 import JSEncrypt from 'jsencrypt';
 import { watch } from 'vue';
+import { cryptoUrls, publicKey } from '@/utils/constant.ts';
+import { cloneDeep } from 'lodash-es';
 import { useLoading } from './useLoading.ts';
+import { genUUID, useCrypto } from './useCrypto.ts';
 
 type RequestInstance = ReturnType<typeof axios.create>;
 
@@ -48,18 +51,6 @@ function addInterceptors(instance: RequestInstance) {
   return instance;
 }
 
-function generateRandomStr(strLength = 16) {
-  let code = '';
-  const chars = 'abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789';
-  const charsArr = chars.split('');
-
-  for (let i = 0; i < strLength; i++) {
-    const num = Math.floor(Math.random() * charsArr.length);
-    code += charsArr[num];
-  }
-  return code;
-}
-
 function generateTimer(uuid: any) {
   return CryptoJS.AES.encrypt(
     CryptoJS.enc.Utf8.parse(JSON.stringify({ time: String(new Date().getTime()), uuid })),
@@ -99,6 +90,13 @@ function handleError(res: any, call: any) {
   }
 }
 
+/**
+ * 是否需要加解密
+ */
+function isUrlCrypto(url: RequestUrl) {
+  return cryptoUrls.includes(url);
+}
+
 /**
  * http请求
  */
@@ -111,11 +109,10 @@ export function useRequest<T = Record<any, any>, P = Record<any, any>>(
 ) {
   const appStore = useAppStore();
   const { changeShowLoading } = useLoading();
+  const { getHeaderKey, decrypt } = useCrypto();
 
   const request = (params: P = {} as P, specialUrl = '') => {
-    const publicKey =
-      'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDfGTt8qny6pipLYYhBVAIGZ6CgMdmYCVPy3bAi8AO1MvOD3Pba1OxLSEvtctOmcibO6NL5NZgQrsTjfu1RMSJkwv1vY/GsKH4c/fbmd3QPhuKUZNHQhTMicbeGFadMM2xRkBkZDjeakemqTdLQFnkRFSeE35GKRkBBimOm4YWBQwIDAQAB';
-    const uuid = generateRandomStr(16);
+    const uuid = genUUID(16);
     const enCrypto = new JSEncrypt();
     enCrypto.setPublicKey(publicKey);
     const secretKey = enCrypto.encrypt(uuid).toString();
@@ -132,9 +129,22 @@ export function useRequest<T = Record<any, any>, P = Record<any, any>>(
           headers: {
             Authorization: isAuth ? appStore.jwtToken : '',
             sign: `secretKey=${secretKey};timer=${timer}`,
+            secure: getHeaderKey.value,
             ...config.headers,
           },
         })
+        .then((res) => {
+          if (isUrlCrypto(url) && res.success && res.data) {
+            const decryptData = decrypt(res.data as string);
+            console.log('解密数据为：', cloneDeep(decryptData));
+            return {
+              ...res,
+              data: decryptData,
+            };
+          } else {
+            return res;
+          }
+        })
         .catch((res) => {
           return handleError(res, call);
         })

src/utils/constant.ts

+import { RequestUrl } from '@/types/api.ts';
+
 /** 产业园级别 */
 export const industrialLevels = ['国家级', '省级', '市级', '区县级', '其他'];
 
@@ -100,3 +102,22 @@ export const standardFloorWeights = [
 
 /** 柱距 */
 export const pillarDistances = ['10m以下', '10-30m', '30-50m', '50m以上'];
+
+/** 公钥 */
+export const publicKey =
+  'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDfGTt8qny6pipLYYhBVAIGZ6CgMdmYCVPy3bAi8AO1MvOD3Pba1OxLSEvtctOmcibO6NL5NZgQrsTjfu1RMSJkwv1vY/GsKH4c/fbmd3QPhuKUZNHQhTMicbeGFadMM2xRkBkZDjeakemqTdLQFnkRFSeE35GKRkBBimOm4YWBQwIDAQAB';
+
+/** 需要加密的接口 */
+export const cryptoUrls = [
+  RequestUrl.carrierList,
+  RequestUrl.carrierDetail,
+  RequestUrl.landDetail,
+  RequestUrl.landList,
+  RequestUrl.industrialParkList,
+  RequestUrl.industrialParkDetal,
+  RequestUrl.developZoneDetail,
+  RequestUrl.developZoneList,
+  RequestUrl.policyList,
+  RequestUrl.policyDetail,
+  RequestUrl.homePage,
+];

src/views/industry/IndustryPolicyDetail.vue

@@ -19,7 +19,7 @@
       </div>
       <div class="mb-[17px] flex flex-wrap">
         <span
-          v-for="item in detail.industryList.split(',')"
+          v-for="item in detail.industryList?.split(',') || []"
           :key="item"
           class="mb-2 mr-[13px] flex-wrap bg-[rgba(44,104,255,0.08)] px-3 text-sm leading-[22px] text-[#2C68FF]"
         >

vite.config.mts

@@ -12,9 +12,12 @@ import legacy from '@vitejs/plugin-legacy';
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig((env) => {
+  const isProd = env.mode === 'production';
+
+  return {
     esbuild: {
-    drop: ['console'],
+      ...(isProd ? { drop: ['console'] } : {}),
     },
     plugins: [
       vue(),
@@ -41,7 +44,7 @@ export default defineConfig({
       proxy: {
         '/userAPI': {
           // target: 'http://172.19.161.87:8087',
-        target: 'http://test.user.liyeyun.com',
+          target: 'http://test.api.liyeyun.com',
           changeOrigin: true,
           secure: false,
           rewrite: (path) => path.replace(/^\/userAPI/, ''),
@@ -55,4 +58,5 @@ export default defineConfig({
         },
       },
     },
+  };
 });