oss上传秘钥加密

package-lock.json

@@ -3823,6 +3823,11 @@
         "randomfill": "^1.0.3"
       }
     },
+    "crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
+    },
     "css": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
@@ -9345,6 +9350,11 @@
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
       "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
     },
+    "jsencrypt": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/jsencrypt/-/jsencrypt-3.3.2.tgz",
+      "integrity": "sha512-arQR1R1ESGdAxY7ZheWr12wCaF2yF47v5qpB76TtV64H1pyGudk9Hvw8Y9tb/FiTIaaTRUyaSnm5T/Y53Ghm/A=="
+    },
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",

package.json

@@ -12,6 +12,7 @@
     "ali-oss": "^6.18.1",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
+    "crypto-js": "^4.2.0",
     "decimal.js": "^10.4.3",
     "echarts": "^4.8.0",
     "element-theme": "^2.0.1",
@@ -19,6 +20,7 @@
     "file-saver": "^2.0.5",
     "image-webpack-loader": "^8.1.0",
     "js-cookie": "^2.2.1",
+    "jsencrypt": "^3.3.2",
     "jszip": "^3.10.1",
     "mavon-editor": "^2.10.4",
     "postcss-px2rem": "^0.3.0",

src/api/index.js

@@ -13,6 +13,7 @@ export default {
   refreshPageNotification: `nakadai/message/refreshPageNotification`,
   getCurrentTime: `competition/competition/management/getCurrentTime`,
   heartbeatDetection: `nakadai/message/heartbeatDetection`,
+  encrypt: `nakadai/data/encrypt`,
 
   getPlayAuth: `oss/manage/getPlayAuth`, // 获取播放凭证
 

src/components/upload/config.js

@@ -1,15 +1,41 @@
 /**
  * 阿里云oss配置
  * */
+import { get } from '@/plugins/requests/index.js'
+import api from '@/api'
+import CryptoJS from 'crypto-js'
+import JSEncrypt from 'jsencrypt'
 
- export default {
+const A = (key, encryptedData) => {
+  const keyHex = CryptoJS.enc.Base64.parse(key)
+  const decrypted = CryptoJS.AES.decrypt(encryptedData, keyHex, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7
+  })
+  return decrypted.toString(CryptoJS.enc.Utf8)
+}
+
+const R = (encryptedKey, privateKey) => {
+  const decrypt = new JSEncrypt()
+  decrypt.setPrivateKey(privateKey)
+  const decryptedKey = decrypt.decrypt(encryptedKey)
+  return decryptedKey
+}
+
+export default async function () {
+  try {
+    const res = await get(api.encrypt)
+    const RE = A(R(res.encryptedKey, res.privateKey), res.encryptedData).split('/')
+    return {
       // oss账号信息
       config: {
         region: 'oss-cn-shenzhen',
-		accessKeyId: 'LTAI4FzqQHnk4rozqLZ8jCNj',
+        accessKeyId: RE[0],
-		accessKeySecret: 'mveW7B1OyFoKUkHm8WsxmrjHmkJWHq',
+        accessKeySecret: RE[1],
         bucket: 'huoran'
       },
       // 上传成功url前置部分（成功回调没有返回url）
       preUrl: 'https://huoran.oss-cn-shenzhen.aliyuncs.com/'
+    }
+  } catch (e) { }
 }

src/components/upload/index.vue

@@ -1,24 +1,12 @@
 <template>
-  <el-upload :disabled="uploading"
+  <el-upload :disabled="uploading" :before-upload="beforeUpload" :on-remove="onRemove" :on-error="uploadError"
-             :before-upload="beforeUpload"
+    :limit="limit" action="" :on-exceed="handleExceed" :show-file-list="showFiles" :file-list="fileList"
-             :on-remove="onRemove"
+    :http-request="handleRequest" name="file">
-             :on-error="uploadError"
-             :limit="limit"
-             action=""
-             :on-exceed="handleExceed"
-             :show-file-list="showFiles"
-             :file-list="fileList"
-             :http-request="handleRequest"
-             name="file">
     <slot name="trigger">
-      <el-button size="small"
+      <el-button size="small" :loading="uploading">{{ uploading ? '正在上传' : '上传文件' }}</el-button>
-                 :loading="uploading">{{ uploading ? '正在上传' : '上传文件' }}</el-button>
     </slot>
-    <div slot="tip"
+    <div slot="tip" class="el-upload__tip">
-         class="el-upload__tip">
+      <el-progress v-if="uploading" class="upload-progress" :stroke-width="3"
-      <el-progress v-if="uploading"
-                   class="upload-progress"
-                   :stroke-width="3"
         :percentage="uploadProgress"></el-progress>
       <slot name="tip">
         <p>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</p>
@@ -69,7 +57,8 @@ export default {
       client: null,
       uploading: false,
       uploadProgress: 0,
-      showFiles: this.showFileList
+      showFiles: this.showFileList,
+      Oss: {},
     };
   },
   mounted () {
@@ -77,8 +66,9 @@ export default {
   },
   methods: {
     // 初始化oss
-    initOss () {
+    async initOss () {
-      this.client = new OSS(OssConfig.config)
+      this.Oss = await OssConfig()
+      this.client = new OSS(this.Oss.config)
     },
     // 附件上传前
     beforeUpload (file) {
@@ -107,7 +97,7 @@ export default {
         });
 
         this.uploading = false
-        const url = OssConfig.preUrl + name
+        const url = this.Oss.preUrl + name
         this.changeFileList && this.$emit('update:fileList', [
           ...this.fileList,
           {

src/components/upload/upload.js

@@ -5,14 +5,17 @@ import OssConfig from './config'
 import Util from '@/libs/util'
 
 let client = null
+let Oss
 // 初始化oss
-const initOss = () => {
+const initOss = async () => {
-	if (!client) client = new OSS(OssConfig.config)
+  Oss = await OssConfig()
+  if (!client) client = new OSS(Oss.config)
 }
+initOss()
 
 export default {
   // 上传文件
-	upload(file) {
+  upload (file) {
     initOss()
     return new Promise(async (resolve, reject) => {
       try {
@@ -21,7 +24,7 @@ export default {
         resolve({
           format: Util.getFileExt(file.name),
           name: file.name,
-          url: OssConfig.preUrl + res.name,
+          url: Oss.preUrl + res.name,
           size: file.size,
         })
       } catch (error) {
@@ -30,8 +33,8 @@ export default {
     })
   },
   // 删除文件（传完整url，不是没有https的name，因为很多接口没有存name，只存url，所以统一使用url）
-	async del(url) {
+  async del (url) {
     initOss()
-		await client.delete(url.replace(OssConfig.preUrl, ''));
+    await client.delete(url.replace(Oss.preUrl, ''));
   }
 }

src/layouts/home/index.vue

@@ -4,53 +4,36 @@
     <div class="layout">
       <navbar></navbar>
       <div class="content">
-        <transition name="move"
+        <transition name="move" mode="out-in">
-                    mode="out-in">
           <router-view class="view"></router-view>
         </transition>
         <el-backtop target=".content"></el-backtop>
       </div>
       <v-footer ref="footer"></v-footer>
-      <div class="log-mask"
+      <div class="log-mask" v-if="logVisible"></div>
-           v-if="logVisible"></div>
+      <div class="log-dia" v-if="logVisible">
-      <div class="log-dia"
+        <img class="bg1" src="@/assets/img/log-bg.png" alt="">
-           v-if="logVisible">
+        <img class="bg2" src="@/assets/img/log-bg1.png" alt="">
-        <img class="bg1"
-             src="@/assets/img/log-bg.png"
-             alt="">
-        <img class="bg2"
-             src="@/assets/img/log-bg1.png"
-             alt="">
         <p class="log-title">更新日志</p>
         <div class="log-wrap">
           <div class="logs">
-            <div class="item"
+            <div class="item" v-for="(item, i) in list" :key="i" v-show="!i || (i && logAll)">
-                 v-for="(item, i) in list"
-                 :key="i"
-                 v-show="!i || (i && logAll)">
               <h6>{{ item.versionName }}</h6>
-              <img v-if="item.coverUrl"
+              <img v-if="item.coverUrl" :src="item.coverUrl" alt="" class="cover">
-                   :src="item.coverUrl"
-                   alt=""
-                   class="cover">
               <ul class="detail">
-                <li v-for="(item, i) in item.logContents"
+                <li v-for="(item, i) in item.logContents" :key="i">
-                    :key="i">
+                  <p class="name"><img
-                  <p class="name"><img :src="require('@/assets/img/' + funcList.find(e => e.id === item.type).icon + '.png')"
+                      :src="require('@/assets/img/' + funcList.find(e => e.id === item.type).icon + '.png')" alt=""> {{
-                         alt=""> {{ funcList.find(e => e.id === item.type).name }}</p>
+                        funcList.find(e => e.id === item.type).name }}</p>
                   <div class="val">
-                    <p v-for="(item, i) in item.content"
+                    <p v-for="(item, i) in item.content" :key="i">{{ i + 1 }}、{{ item }}</p>
-                       :key="i">{{ i + 1 }}、{{ item }}</p>
                   </div>
                 </li>
               </ul>
             </div>
           </div>
           <div class="more-wrap">
-            <el-button class="know"
+            <el-button class="know" type="primary" size="small" @click="logVisible = false">知道了</el-button>
-                       type="primary"
-                       size="small"
-                       @click="logVisible = false">知道了</el-button>
           </div>
         </div>
       </div>
@@ -102,7 +85,7 @@ export default {
     ])
   },
   mounted () {
-    this.autoLogout();
+    this.autoLogout()
     this.logView || this.getLogStatus() // logView为false才需要查询接口
   },
   methods: {
@@ -161,6 +144,7 @@ export default {
     padding: 24px;
   }
 }
+
 .log-mask {
   position: fixed;
   top: 0;
@@ -169,6 +153,7 @@ export default {
   right: 0;
   background-color: rgba(0, 0, 0, 0.4);
 }
+
 /deep/.log-dia {
   z-index: 11;
   position: absolute;
@@ -178,10 +163,12 @@ export default {
   transform: translateX(-50%);
   background-color: #fff;
   border-radius: 6px;
+
   .bg1 {
     width: 100%;
     height: 140px;
   }
+
   .bg2 {
     position: absolute;
     top: -130px;
@@ -189,6 +176,7 @@ export default {
     max-width: 100%;
     height: 250px;
   }
+
   .log-title {
     position: absolute;
     top: 65px;
@@ -199,53 +187,64 @@ export default {
     color: #fff;
     font-weight: 600;
   }
+
   .log-wrap {
     padding-bottom: 30px;
   }
+
   .logs {
     max-height: 250px;
     padding: 0 100px;
     margin: 30px 0;
     overflow: auto;
   }
+
   h6 {
     margin-bottom: 15px;
     font-size: 16px;
     color: #333;
     line-height: 1;
   }
+
   .more-wrap {
     padding: 0 60px;
     font-size: 14px;
     color: #333;
     text-align: center;
   }
+
   .know {
     margin-top: 15px;
   }
+
   .cover {
     max-width: 250px;
     max-height: 160px;
     margin: 10px 0 20px;
   }
+
   .detail {
     li {
       margin-bottom: 20px;
     }
+
     .name {
       display: flex;
       align-items: center;
       margin-bottom: 5px;
       font-size: 14px;
+
       img {
         width: 20px;
         margin-right: 8px;
       }
     }
+
     .val {
       font-size: 15px;
       line-height: 1.8;
       white-space: pre-wrap;
+
       p {
         position: relative;
         font-size: 13px;