💄 分享界面加入提取码功能

src/api/file-api.js

@@ -180,6 +180,14 @@ export default {
       params
     })
   },
+  // 验证提取码
+  validShareCode: function(data) {
+    return request({
+      url: 'public/valid-share-code',
+      method: 'post',
+      data
+    })
+  },
   // 访问分享链接
   accessShare: function(params) {
     return request({

src/components/Icon/IconFile.vue

@@ -10,7 +10,7 @@
           <svg-icon v-if="grid" class="mobile grid icon-favorite" icon-class="Favoritestarrate"/>
         </div>
     </div>
-    <div v-if="item.isShare && item.shareId && !public">
+    <div v-if="item.isShare && item.shareBase && !public">
         <div v-if="pc">
           <svg-icon v-if="!grid" class="pc list icon-share" icon-class="share"/>
           <svg-icon v-if="grid" class="pc grid icon-share" icon-class="share"/>

src/components/ShowFile/ShowFile.vue

@@ -2891,38 +2891,16 @@ export default {
       }
       this.shareDialogObject = row
       this.shareDialogObject.fileId = row.id
-      this.shareDialogObject.shareId = undefined
+      this.shareDialogObject.shareBase = undefined
       this.shareDialogVisible = true
-      // this.shareFileName = row.name
-      // api.generate({
-      //   userId: row.userId,
-      //   fileId: row.id,
-      //   isFolder: row.isFolder
-      // }).then(res => {
-      //   this.shareDialog = true
-      //   // 这3行代码是为了让vue刷新数据
-      //   const isFavorite = this.rowContextData.isFavorite
-      //   this.rowContextData.isFavorite = !isFavorite
-      //   this.rowContextData.isFavorite = isFavorite
-      //   if (res.data) {
-      //     let shareId = res.data
-      //     this.shareLink = window.location.origin + '/s?s=' + shareId
-      //     this.generateShareLinkLoading = false
-      //     this.rowContextData.shareId = shareId
-      //   }
-      //   this.rowContextData.isShare = true
-      // }).catch(() => {
-      //   this.shareDialog = false
-      //   this.generateShareLinkLoading = false
-      // })
     },
-    shareSuccess(shareId) {
+    shareSuccess(shareBase) {
-      console.log('shareSuccess', shareId)
+      console.log('shareSuccess', shareBase)
       // 这3行代码是为了让vue刷新数据
       const isFavorite = this.rowContextData.isFavorite
       this.rowContextData.isFavorite = !isFavorite
       this.rowContextData.isFavorite = isFavorite
-      this.rowContextData.shareId = shareId
+      this.rowContextData.shareBase = shareBase
       this.rowContextData.isShare = true
     },
     downloadFile() {

src/components/office/OnlyOfficeEditor.vue

@@ -122,7 +122,7 @@ export default {
       }
       this.fileUrl = window.location.origin + fileConfig.previewUrl(this.$store.state.user.name, this.file, this.$store.getters.token)
       if(this.readOnly && window.shareId){
-        this.fileUrl = window.location.origin + fileConfig.publicPreviewUrl(this.file.id, window.shareId)
+        this.fileUrl = window.location.origin + fileConfig.publicPreviewUrl(this.file.id, window.shareId, this.$store.getters.shareToken)
       }
       let fileKey = `${new Date(this.file.updateDate).getTime()}-${this.file.id}`
 

src/components/preview/AudioPreview.vue

@@ -63,7 +63,7 @@ export default {
         }
         let url = fileConfig.previewUrl(this.$store.state.user.name, newFile, this.$store.getters.token)
         if(!this.$store.state.user.token){
-          url = fileConfig.publicPreviewUrl(newFile.id, window.shareId);
+          url = fileConfig.publicPreviewUrl(newFile.id, window.shareId, this.$store.getters.shareToken);
         }
         let music = newFile.music
         let fileName = newFile.name.substring(0,newFile.name.length - newFile.suffix.length-1)

src/components/preview/ImageViewer.vue

@@ -116,7 +116,7 @@ export default {
     getImageUrl(element) {
       let url = fileConfig.previewUrl(this.$store.state.user.name, element, this.$store.getters.token)
       if (this.shareId) {
-        url = fileConfig.publicPreviewUrl(element.id, window.shareId);
+        url = fileConfig.publicPreviewUrl(element.id, window.shareId, this.$store.getters.shareToken);
       }
       return url
     },

src/components/preview/OfficePreview.vue

@@ -225,7 +225,7 @@ export default {
       }
       this.fileUrl = window.location.origin + fileConfig.previewUrl(this.$store.state.user.name, this.file, this.$store.getters.token)
       if(this.readOnly && window.shareId){
-        this.fileUrl = window.location.origin + fileConfig.publicPreviewUrl(this.file.id, window.shareId)
+        this.fileUrl = window.location.origin + fileConfig.publicPreviewUrl(this.file.id, window.shareId, this.$store.getters.shareToken)
       }
     },
   }

src/components/preview/VideoPreview.vue

@@ -100,7 +100,7 @@ export default {
         if(visible){
           let url = fileConfig.previewUrl(this.$store.state.user.name, this.file, this.$store.getters.token)
           if(this.shareId){
-            url = fileConfig.publicPreviewUrl(this.file.id, window.shareId);
+            url = fileConfig.publicPreviewUrl(this.file.id, window.shareId, this.$store.getters.shareToken);
           }
           this.playerOptions.sources = [{
                         //类型

src/store/getters.js

@@ -2,6 +2,7 @@ const getters = {
   sidebar: state => state.app.sidebar,
   device: state => state.app.device,
   token: state => state.user.token,
+  shareToken: state => state.user.shareToken,
   avatar: state => state.user.avatar,
   name: state => state.user.name,
   showName: state => state.user.showName,

src/store/modules/user.js

@@ -1,15 +1,29 @@
 import { login, logout, getInfo } from '@/api/user'
+import fileApi from '@/api/file-api'
 import menuApi from '@/api/menu'
-import { getToken, setToken, getConsumerId, setConsumerId, removeToken, removeConsumerId , setRememberName, removeRememberName } from '@/utils/auth'
+import {
+  getToken,
+  setToken,
+  getConsumerId,
+  setConsumerId,
+  removeToken,
+  removeConsumerId,
+  setRememberName,
+  removeRememberName,
+  setShareToken,
+  getShareToken
+} from '@/utils/auth'
 import { setLogo } from '@/utils/logo'
 import { resetRouter } from '@/router'
 import router from '@/router'
 import Layout from '@/layout'
 import ParentView from '@/components/ParentView'
+import api from "@/api/file-api";
 
 const getDefaultState = () => {
   return {
     token: getToken(),
+    shareToken: getShareToken(),
     name: '',
     showName: '',
     userInfo: {},
@@ -30,6 +44,9 @@ const mutations = {
   SET_TOKEN: (state, token) => {
     state.token = token
   },
+  SET_SHARE_TOKEN: (state, token) => {
+    state.shareToken = token
+  },
   SET_NAME: (state, name) => {
     state.name = name
   },
@@ -93,7 +110,19 @@ const actions = {
       })
     })
   },
-
+  // 验证提取码
+  validShareCode({commit}, {shareId, shareCode}) {
+    return new Promise((resolve, reject) => {
+      fileApi.validShareCode({ shareId: shareId, shareCode: shareCode }).then(response => {
+        const { data } = response
+        commit('SET_SHARE_TOKEN', data)
+        setShareToken(data)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
   // set logo
   setLogo({ commit }, logoInfo) {
     const { netdiskName, netdiskLogo } = logoInfo

src/utils/auth.js

@@ -1,6 +1,7 @@
 import Cookies from 'js-cookie'
 
-const TokenKey = 'jmal_token'
+const tokenKey = 'jmal_token'
+const shareTokenKey = 'share-token'
 const consumerId = 'consumerId'
 const rememberName = 'rememberName'
 
@@ -17,15 +18,23 @@ export function removeRememberName() {
 }
 
 export function getToken() {
-  return Cookies.get(TokenKey)
+  return Cookies.get(tokenKey)
+}
+
+export function getShareToken() {
+  return Cookies.get(shareTokenKey)
+}
+
+export function setShareToken(token) {
+  return Cookies.set(shareTokenKey, token)
 }
 
 export function setToken(token) {
-  return Cookies.set(TokenKey, token)
+  return Cookies.set(tokenKey, token)
 }
 
 export function removeToken() {
-  return Cookies.remove(TokenKey)
+  return Cookies.remove(tokenKey)
 }
 
 export function getConsumerId() {

src/utils/file-config.js

@@ -19,11 +19,14 @@ export default {
     return `${window.location.origin}${this.baseUrl}/office/track?jmal-token=${token}&fileId=${fileId}`
   },
   // 预览文件的url
-  previewUrl: function(username, file, token) {
+  previewUrl: function(username, file, token, shareToken) {
     let fileUrl = `${this.baseUrl}/file/${username}${encodeURI(file.path)}${encodeURI(file.name)}`
     if (token) {
       return `${fileUrl}?jmal-token=${token}`
     }
+    if (shareToken) {
+      return `${fileUrl}?share-token=${shareToken}`
+    }
     return fileUrl
   },
   // mardown里上传图片后的图片预览地址
@@ -43,34 +46,40 @@ export default {
     })
   },
   // 打包下载文件
-  packageDownload: function(fileIds, token) {
+  packageDownload: function(fileIds, token, shareToken) {
     fileApi.isAllowDownload().then(() => {
       window.open(`${this.baseUrl}/packageDownload?fileIds=${fileIds}&jmal-token=${token}`, '_self')
     })
   },
   // 共享文件下载
-  publicDownload: function(shareId, file) {
+  publicDownload: function(shareId, file, shareToken) {
-    window.open(this.publicDownloadUrl(shareId, file), '_self')
+    window.open(this.publicDownloadUrl(shareId, file, shareToken), '_self')
   },
   // 共享文件预览
-  publicPreview: function(fileId, shareId) {
+  publicPreview: function(fileId, shareId, shareToken) {
-    const url = this.publicPreviewUrl(fileId, shareId)
+    const url = this.publicPreviewUrl(fileId, shareId, shareToken)
     window.open(url, '_blank')
   },
   // 共享文件预览Url
-  publicPreviewUrl: function(fileId, shareId) {
+  publicPreviewUrl: function(fileId, shareId, shareToken) {
-    return `${this.baseUrl}/public/s/preview/${fileId}/${shareId}`
+    if (!shareToken) {
+      shareToken = "none"
+    }
+    return `${this.baseUrl}/public/s/preview/${fileId}/${shareId}/${shareToken}`
   },
   // 共享文件打包下载
-  publicPackageDownload: function(shareId, fileIds) {
+  publicPackageDownload: function(shareId, fileIds, shareToken) {
-    window.open(this.publicPackageDownloadUrl(shareId, fileIds), '_self')
+    window.open(this.publicPackageDownloadUrl(shareId, fileIds, shareToken), '_self')
   },
   // 共享文件下载Url
-  publicDownloadUrl: function(shareId, file) {
+  publicDownloadUrl: function(shareId, file, shareToken) {
-    return window.location.origin + `${this.baseUrl}/public/s/download/${file.id}/${shareId}`
+    if (!shareToken) {
+      shareToken = "none"
+    }
+    return window.location.origin + `${this.baseUrl}/public/s/download/${file.id}/${shareId}/${shareToken}`
   },
   // 共享文件打包下载Url
-  publicPackageDownloadUrl: function(shareId, fileIds) {
+  publicPackageDownloadUrl: function(shareId, fileIds, shareToken) {
-    return window.location.origin + `${this.baseUrl}/public/s/packageDownload?shareId=${shareId}&fileIds=${fileIds}`
+    return window.location.origin + `${this.baseUrl}/public/s/packageDownload?shareId=${shareId}&fileIds=${fileIds}$share-token=${shareToken}`
   },
 }

src/utils/request.js

@@ -1,6 +1,6 @@
 // import { MessageBox, Message } from 'element-ui'
 import store from '@/store'
-import { getToken } from '@/utils/auth'
+import {getShareToken, getToken} from '@/utils/auth'
 
 // create an axios instance
 const service = axios.create({
@@ -14,10 +14,11 @@ service.interceptors.request.use(
   config => {
     // do something before request is sent
     if (store.getters.token) {
-      // let each request carry token
-      // ['X-Token'] is a custom headers key
-      // please modify it according to the actual situation
       config.headers['jmal-token'] = getToken()
+      console.log(config.headers)
+    }
+    if (store.getters.shareToken) {
+      config.headers['share-token'] = getShareToken()
     }
     return config
   },

src/views/public/share/shareList.vue

@@ -226,10 +226,10 @@
         <span>{{ shareData.fileName }}</span>
       </div>
       <div class="share-code">
-        <el-input v-model="extractionCode" placeholder="请输入提取码" clearable></el-input>
+        <el-input v-model="extractionCode" placeholder="请输入提取码" clearable @keyup.enter.native="validShareCode(extractionCode)"></el-input>
       </div>
       <div class="share-code-valid">
-        <el-button type="primary" :disabled="extractionCode.length === 0">查看文件</el-button>
+        <el-button type="primary" :disabled="extractionCode.length === 0" @click="validShareCode(extractionCode)">查看文件</el-button>
       </div>
     </div>
 
@@ -276,6 +276,7 @@ import fileConfig from "@/utils/file-config";
 import Clipboard from "clipboard";
 import OfficePreview from "@/components/preview/OfficePreview";
 import Logo from "@/components/Logo";
+import getPageTitle from "@/utils/get-page-title";
 
 export default {
   components: {
@@ -606,7 +607,6 @@ export default {
             this.showShareCode = true
             userId = res.data.userId
             this.shareData = res.data
-            console.log('shareData', this.shareData)
           } else {
             this.fileList = res.data
             this.fileList.map((item, index) => {
@@ -661,7 +661,6 @@ export default {
     getSharer(userId) {
       api.getSharer({userId: userId}).then(res => {
         this.sharer = res.data
-        console.log('this.sharer', this.sharer)
         this.sharerAvatarUrl = window.location.origin + this.imageUrl + res.data.avatar
         if (this.sharer.netdiskName) {
           this.netdiskName = this.sharer.netdiskName
@@ -937,20 +936,20 @@ export default {
         }
         if (fileIds.length > 1 || this.rowContextData.isFolder) {
           if (copy) {
-            this.copyDownloadLink(fileConfig.publicPackageDownloadUrl(this.shareId, fileIds))
+            this.copyDownloadLink(fileConfig.publicPackageDownloadUrl(this.shareId, fileIds, this.$store.getters.shareToken))
           } else {
-            fileConfig.publicPackageDownload(this.shareId, fileIds)
+            fileConfig.publicPackageDownload(this.shareId, fileIds, this.$store.getters.shareToken)
           }
           return
         }
         if (copy) {
           if (this.rowContextData.isShare) {
-            this.copyDownloadLink(window.location.origin + fileConfig.previewUrl(this.sharer.username, this.rowContextData))
+            this.copyDownloadLink(window.location.origin + fileConfig.previewUrl(this.sharer.username, this.rowContextData,undefined, this.$store.getters.shareToken))
           } else {
-            this.copyDownloadLink(fileConfig.publicPackageDownloadUrl(this.shareId, fileIds))
+            this.copyDownloadLink(fileConfig.publicPackageDownloadUrl(this.shareId, fileIds, this.$store.getters.shareToken))
           }
         } else {
-          fileConfig.publicDownload(this.shareId, this.rowContextData)
+          fileConfig.publicDownload(this.shareId, this.rowContextData, this.$store.getters.shareToken)
         }
       } else {
         this.$message({
@@ -976,6 +975,7 @@ export default {
         this.$message({message: '该浏览器不支持自动复制', type: 'warning', duration: 1000});
         clipboard.destroy()
       })
+      console.log('url', url)
     },
     // 点击文件或文件夹
     fileClick(row) {
@@ -1022,8 +1022,19 @@ export default {
           return
         }
         // 打开文件
-        fileConfig.publicPreview(row.id, this.shareId)
+        fileConfig.publicPreview(row.id, this.shareId, this.$store.getters.shareToken)
       }
+    },
+    /**
+     * 验证提取码
+     * @param shareCode 提取码
+     */
+    validShareCode(shareCode) {
+      this.$store.dispatch('user/validShareCode', {shareId: this.shareId, shareCode: shareCode}).then(()=> {
+        this.showShareCode = false
+        // 验证成功
+        this.getFileList()
+      })
     }
   }
 }