feat: 前端提交功能接入AES加密 (#12)

README.md

@@ -3,15 +3,18 @@
     <img src="https://img-hxy021.didistatic.com/static/starimg/img/j8lBA6yy201698840712358.jpg"  width="300" align='center' />
   </p>
   <div>
-    <a href="https://github.com/didi/xiaoju-survey/pulls">
-        <img src="https://img.shields.io/badge/PRs-welcome-%23ffa600" alt="pr">
-    </a>
     <a href="https://github.com/didi/xiaoju-survey/graphs/contributors">
         <img src="https://img.shields.io/github/last-commit/didi/xiaoju-survey?color=red" alt="commit">
     </a>
+    <a href="https://github.com/didi/xiaoju-survey/pulls">
+        <img src="https://img.shields.io/badge/PRs-welcome-%23ffa600" alt="pr">
+    </a>
     <a href="https://github.com/didi/xiaoju-survey/issues">
         <img src="https://img.shields.io/github/issues/didi/xiaoju-survey" alt="issues">
     </a>
+    <a href="https://github.com/didi/xiaoju-survey/discussions">
+        <img src="https://img.shields.io/badge/Discussions-%E8%AE%A8%E8%AE%BA-blue" alt="discussions-">
+    </a>
     <a href="https://xiaojusurvey.didi.cn">
         <img src="https://img.shields.io/badge/help-%E6%96%87%E6%A1%A3-blue" alt="docs">
     </a>

web/package.json

@@ -16,7 +16,7 @@
     "axios": "^1.4.0",
     "clipboard": "^2.0.11",
     "core-js": "^3.8.3",
-    "crypto-js": "^4.1.1",
+    "crypto-js": "^4.2.0",
     "element-ui": "^2.15.13",
     "moment": "^2.29.4",
     "qrcode": "^1.5.3",

web/src/render/App.vue

@@ -30,6 +30,7 @@ export default {
   computed: {},
   created() {
     this.init();
+    this.$store.dispatch('getEncryptInfo');
   },
   beforeCreate() {},
   methods: {

web/src/render/api/base.js

@@ -38,11 +38,11 @@ const getSignByData = (sourceData) => {
 
 // 请求中间件，对所有请求都生成签名
 instance.interceptors.request.use((request) => {
-  let data;
+  let data = {};
   if (request.method === 'get') {
-    data = request.params;
+    data = request.params || data;
   } else if (request.method === 'post') {
-    data = request.data;
+    data = request.data || data;
   }
   const sign = getSignByData(data);
   data.sign = sign;

web/src/render/api/survey.js

@@ -20,3 +20,7 @@ export const queryVote = ({ surveyPath, voteKeyList }) => {
     },
   });
 };
+
+export const getEncryptInfo = () => {
+  return axios.get('/surveyPublish/getEncryptInfo');
+};

web/src/render/pages/index.vue

@@ -15,6 +15,7 @@ import Header from '../components/header.vue';
 import submit from '../components/submit.vue';
 import mainRenderer from '../components/mainRenderer';
 import { submitForm } from '@/render/api/survey';
+import encrypt from '../utils/encrypt';
 
 export default {
   name: 'indexPage',
@@ -46,6 +47,9 @@ export default {
     renderData() {
       return this.$store.getters.renderData;
     },
+    encryptInfo() {
+      return this.$store.state.encryptInfo;
+    },
   },
   methods: {
     validate(cbk) {
@@ -78,8 +82,14 @@ export default {
         difTime: Date.now() - this.$store.state.enterTime,
         clientTime: Date.now(),
       };
-      result.encryptType = 'base64';
+      result.encryptType = this.encryptInfo?.encryptType || 'base64';
-      result.data = btoa(encodeURIComponent(result.data));
+      result.data = encrypt[result.encryptType]({
+        data: result.data,
+        code: this.encryptInfo?.data?.code,
+      });
+      if (this.encryptInfo?.data?.sessionId) {
+        result.sessionId = this.encryptInfo.data.sessionId;
+      }
       return result;
     },
     async submitForm() {

web/src/render/store/actions.js

@@ -1,6 +1,7 @@
 import moment from 'moment';
 import adapter from '../adapter';
-import { queryVote } from '@/render/api/survey';
+import { queryVote, getEncryptInfo } from '@/render/api/survey';
+import { CODE_MAP } from '@/management/api/base';
 
 export default {
   // 初始化
@@ -32,7 +33,10 @@ export default {
       const todayStr = momentNow.format('yyyy-MM-DD');
       const momentStartTime = moment(`${todayStr} ${answerBegTime}`);
       const momentEndTime = moment(`${todayStr} ${answerEndTime}`);
-      if (momentNow.isBefore(momentStartTime) || momentNow.isAfter(momentEndTime)) {
+      if (
+        momentNow.isBefore(momentStartTime) ||
+        momentNow.isAfter(momentEndTime)
+      ) {
         commit('setRouter', 'errorPage');
         commit('setErrorInfo', {
           errorType: 'overTime',
@@ -101,4 +105,10 @@ export default {
       commit('setVoteMap', voteRes.data);
     }
   },
+  async getEncryptInfo({ commit }) {
+    const res = await getEncryptInfo();
+    if (res.code === CODE_MAP.SUCCESS) {
+      commit('setEncryptInfo', res.data);
+    }
+  },
 };

web/src/render/store/mutations.js

@@ -40,4 +40,7 @@ export default {
   setQuestionSeq(state, data) {
     state.questionSeq = data;
   },
+  setEncryptInfo(state, data) {
+    state.encryptInfo = data;
+  },
 };

web/src/render/store/state.js

@@ -12,4 +12,5 @@ export default {
   enterTime: null,
   questionSeq: [], // 题目的顺序，因为可能会有分页的情况，所以是一个二维数组[[qid1, qid2], [qid3,qid4]]
   voteMap: {},
+  encryptInfo: null,
 };

web/src/render/utils/encrypt.js

@@ -0,0 +1,14 @@
+import CryptoJS from 'crypto-js';
+
+function base64({ data }) {
+  return btoa(encodeURIComponent(data));
+}
+
+function aes({ data, code }) {
+  return CryptoJS.AES.encrypt(encodeURIComponent(data), code).toString();
+}
+
+export default {
+  base64,
+  aes,
+};