对称加密

package.json

@@ -61,7 +61,7 @@
     "chalk": "2.4.2",
     "compression-webpack-plugin": "^1.1.12",
     "connect": "3.6.6",
-    "crypto-js": "4.1.1",
+    "crypto-js": "^4.1.1",
     "eslint": "5.15.3",
     "eslint-plugin-vue": "5.2.2",
     "html-webpack-plugin": "3.2.0",

src/api/openApi.js

@@ -63,3 +63,12 @@ export function openapilogDetailApi(id) {
     method: 'get'
   })
 }
+
+/** 组织机构获取secretKey解密*/
+export function iaminstitutionDecrypt(params) {
+  return request({
+    url: '/iaminstitution/decrypt',
+    method: 'get',
+    params: params
+  })
+}

src/views/OpenApi/index.vue

@@ -83,7 +83,7 @@
             </el-table-column>
             <el-table-column label="secretKey" prop="secretKey" :show-overflow-tooltip="true">
               <template slot-scope="scope">
-                {{ scope.row.secretKey || '-' }}
+                {{ scope.row.secretKey ? '********' : '-' }}
               </template>
             </el-table-column>
             <el-table-column label="apiPubKey" prop="apiPubKey" :show-overflow-tooltip="true">
@@ -157,7 +157,7 @@
         </div>
       </el-tab-pane>
       <el-tab-pane label="网关日志" name="second">
-        <gateway-log/>
+        <gateway-log />
       </el-tab-pane>
     </el-tabs>
     <!-- 添加或修改对话框 -->
@@ -166,52 +166,61 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="机构名称:" prop="organizationalStructure">
-              <el-input v-model="form.organizationalStructure" :disabled="formDisabled" show-word-limit maxlength="20" placeholder="请输入机构名称" />
+              <el-input v-if="!formDisabled" v-model="form.organizationalStructure" show-word-limit maxlength="20" placeholder="请输入机构名称" />
+              <span v-else>{{ form.organizationalStructure || '-' }}</span>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="机构编号:" prop="institutionCode">
-              <el-input v-model="form.institutionCode" :disabled="formDisabled" show-word-limit maxlength="20" placeholder="请输入机构编号" />
+              <el-input v-if="!formDisabled" v-model="form.institutionCode" show-word-limit maxlength="20" placeholder="请输入机构编号" />
+              <span v-else>{{ form.institutionCode || '-' }}</span>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="ip:" prop="ips">
-              <el-input v-model="form.ips" :disabled="formDisabled" show-word-limit  placeholder="请输入ip" />
+              <el-input v-if="!formDisabled" v-model="form.ips" show-word-limit placeholder="请输入ip" />
+              <span v-else>{{ form.ips || '-' }}</span>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="accessKey:" prop="accessKey">
-              <el-input v-model="form.accessKey" :disabled="formDisabled" show-word-limit placeholder="请输入accessKey" />
+              <el-input v-if="!formDisabled" v-model="form.accessKey" show-word-limit placeholder="请输入accessKey" />
+              <span v-else>{{ form.accessKey || '-' }}</span>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="secretKey:" prop="secretKey" class="secretKeyItem">
-              <el-input v-model="form.secretKey" :disabled="formDisabled" show-word-limit placeholder="请输入secretKey" />
+              <el-input v-if="!formDisabled" v-model="form.secretKey" show-word-limit placeholder="请输入secretKey" />
+              <span v-else style="padding-right: 20px">{{ form.secretKey ? '********' : '-' }}</span>
               <el-button v-if="formDisabled === true" class="copy-btn" type="primary" @click="handleCopy">复 制</el-button>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="apiPubKey:" prop="apiPubKey">
-              <el-input v-model="form.apiPubKey" :disabled="formDisabled" show-word-limit  placeholder="请输入apiPubKey" />
+            <el-form-item label="是否启用:" prop="flag">
+              <el-radio-group v-model="form.flag" :disabled="formDisabled">
+                <el-radio :label="'1'">启用</el-radio>
+                <el-radio :label="'0'">停用</el-radio>
+              </el-radio-group>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
-          <el-col :span="12">
+          <el-col :span="24">
             <el-form-item label="apiSecretKey:" prop="apiSecretKey">
-              <el-input v-model="form.apiSecretKey" :disabled="formDisabled" show-word-limit  placeholder="请输入apiSecretKey" />
+              <el-input v-if="!formDisabled" v-model="form.apiSecretKey" show-word-limit placeholder="请输入apiSecretKey" />
+              <span v-else>{{ form.apiSecretKey || '-' }}</span>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item label="是否启用:" prop="flag">
-              <el-radio-group v-model="form.flag" :disabled="formDisabled">
-                <el-radio :label="'1'">启用</el-radio>
-                <el-radio :label="'0'">停用</el-radio>
-              </el-radio-group>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="apiPubKey:" prop="apiPubKey">
+              <el-input v-if="!formDisabled" v-model="form.apiPubKey" show-word-limit placeholder="请输入apiPubKey" />
+              <span v-else>{{ form.apiPubKey || '-' }}</span>
             </el-form-item>
           </el-col>
         </el-row>
@@ -234,7 +243,8 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="备注:" prop="remarks">
-              <el-input v-model="form.remarks" :disabled="formDisabled" type="textarea" show-word-limit maxlength="100" placeholder="请输入备注" />
+              <el-input v-if="!formDisabled" v-model="form.remarks" type="textarea" show-word-limit maxlength="100" placeholder="请输入备注" />
+              <span v-else>{{ form.remarks || '-' }}</span>
             </el-form-item>
           </el-col>
         </el-row>
@@ -248,6 +258,7 @@
 </template>
 
 <script>
+import CryptoJS from 'crypto-js'
 import ClipboardJS from 'clipboard'
 import commonField from '@/utils/commonField'
 import gatewayLog from '@/views/OpenApi/gatewayLog.vue'
@@ -255,7 +266,8 @@ import {
   organizationAddApi, organizationDelApi,
   organizationGetDataListApi,
   organizationGetDetailApi,
-  organizationUpdataApi
+  organizationUpdataApi,
+  iaminstitutionDecrypt
 } from '@/api/openApi'
 
 export default {
@@ -289,7 +301,8 @@ export default {
         institutionCode: '',
         organizationalStructure: '',
         startTime: '',
-        endTime: ''
+        endTime: '',
+        remarks: ''
       },
       open: false,
       title: '',
@@ -422,12 +435,48 @@ export default {
       // 手动触发复制动作
       clipboard.onClick({ currentTarget: document.querySelector('.copy-btn') })
     },
+    /** 加密*/
+    encrypt(value) {
+      // 使用 AES 加密
+      const key = CryptoJS.enc.Utf8.parse('HPJoVqnZaUEIO1qx') // 16 bytes key for AES-128
+      const iv = CryptoJS.enc.Utf8.parse('2268842237427511') // 16 bytes IV
+      const encrypted = CryptoJS.AES.encrypt(value, key, {
+        iv: iv,
+        mode: CryptoJS.mode.CBC,
+        padding: CryptoJS.pad.Pkcs7
+      })
+      return encrypted.toString()
+    },
+    /** 解密*/
+    decrypt(value) {
+      const key = CryptoJS.enc.Utf8.parse('HPJoVqnZaUEIO1qx') // 16 bytes key for AES-128
+      const iv = CryptoJS.enc.Utf8.parse('2268842237427511') // 16 bytes IV
+      const decrypted = CryptoJS.AES.decrypt(value, key, {
+        iv: iv,
+        mode: CryptoJS.mode.CBC,
+        padding: CryptoJS.pad.Pkcs7
+      });
+      return decrypted.toString(CryptoJS.enc.Utf8);
+    },
     /** dialog确认*/
     submitForm() {
       this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.form.businessId !== undefined) {
-            organizationUpdataApi(this.form, this.form.businessId).then(response => {
+            const params = {
+              flag: this.form.flag,
+              apiSecretKey: this.form.apiSecretKey,
+              apiPubKey: this.form.apiPubKey,
+              secretKey: this.encrypt(this.form.secretKey),
+              accessKey: this.form.accessKey,
+              ips: this.form.ips,
+              institutionCode: this.form.institutionCode,
+              organizationalStructure: this.form.organizationalStructure,
+              startTime: this.form.startTime,
+              endTime: this.form.endTime,
+              remarks: this.form.remarks
+            }
+            organizationUpdataApi(params, this.form.businessId).then(response => {
               if (response.code === 200) {
                 this.$message({
                   message: '修改成功',
@@ -438,7 +487,20 @@ export default {
               }
             })
           } else {
-            organizationAddApi(this.form).then(response => {
+            const paramsAdd = {
+              flag: this.form.flag,
+              apiSecretKey: this.form.apiSecretKey,
+              apiPubKey: this.form.apiPubKey,
+              secretKey: this.encrypt(this.form.secretKey),
+              accessKey: this.form.accessKey,
+              ips: this.form.ips,
+              institutionCode: this.form.institutionCode,
+              organizationalStructure: this.form.organizationalStructure,
+              startTime: this.form.startTime,
+              endTime: this.form.endTime,
+              remarks: this.form.remarks
+            }
+            organizationAddApi(paramsAdd).then(response => {
               if (response.code === 200) {
                 this.$message({
                   message: '新增成功', type: 'success'
@@ -459,6 +521,7 @@ export default {
       organizationGetDetailApi(userId).then(response => {
         this.open = true
         this.form = response.data
+        this.form.secretKey = this.decrypt(response.data.secretKey)
         if (this.form.startTime && this.form.endTime) {
           this.dateRange = [this.form.startTime.slice(0, 10), this.form.endTime.slice(0, 10)]
         } else {
@@ -475,6 +538,7 @@ export default {
       organizationGetDetailApi(userId).then(response => {
         this.open = true
         this.form = response.data
+        this.form.secretKey = this.decrypt(response.data.secretKey)
         if (this.form.startTime && this.form.endTime) {
           this.dateRange = [this.form.startTime.slice(0, 10), this.form.endTime.slice(0, 10)]
         } else {