refactor: enhance file sharing functionality by implementing token caching and improving error handling in download processes

front/components/Share/FileShareView.vue

@@ -1,73 +1,69 @@
 <script setup lang="ts">
-import AsyncButton from '@/components/ui/button/AsyncButton.vue'
-import dayjs from 'dayjs';
-import duration from 'dayjs/plugin/duration';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import { isBoolean } from 'lodash-es';
-import { LucideCheck, LucideX } from 'lucide-vue-next';
-import { useQueryClient } from '@tanstack/vue-query';
-dayjs.extend(duration)
-dayjs.extend(relativeTime)
+import AsyncButton from "@/components/ui/button/AsyncButton.vue";
+import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { isBoolean } from "lodash-es";
+import { LucideCheck, LucideX } from "lucide-vue-next";
+import { useQueryClient } from "@tanstack/vue-query";
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
 
 const props = defineProps<{
-    data: any
-}>()
+  data: any;
+}>();
 
-const queryClient = useQueryClient()
+const queryClient = useQueryClient();
+const { downloadFile } = useMyAppShare();
 
 const handleDownload = async () => {
-    const { id } = props?.data || {}
-    const data = await $fetch<{
-        code: number
-        data: {
-            token?: string
-        }
-    }>(`/api/download`, {
-        method: 'POST',
-        body: {
-            share_id: id
-        }
-    })
-    const { token } = data?.data || {}
-    if (!token) {
-        return
-    }
-    (window as any)?.open(`/api/download?token=${token}`)
-    queryClient.invalidateQueries({ queryKey: ['share', id] })
-}
+  const { id } = props?.data || {};
+  await downloadFile(id);
+  queryClient.invalidateQueries({ queryKey: ["share", id] });
+};
 
 const expireSeconds = computed(() => {
-    return dayjs(props?.data?.expire_at * 10e2).unix() - dayjs().unix()
-})
+  return dayjs(props?.data?.expire_at * 10e2).unix() - dayjs().unix();
+});
 
-const { remaining, start} = useCountdown(expireSeconds.value)
+const { remaining, start } = useCountdown(expireSeconds.value);
 
 onMounted(() => {
-    start()
-})
+  start();
+});
 
 const fileShareInfo = computed(() => {
-    return [
-        { label: '需要密码', value: props?.data?.has_password ?? false },
-        { label: '过期时间', value: dayjs.duration(remaining.value, 'seconds').format(`D天 HH:mm:ss`) },
-        { label: '剩余下载次数', value: props?.data?.download_nums ?? 0 },
-    ]
-})
+  return [
+    { label: "需要密码", value: props?.data?.has_password ?? false },
+    {
+      label: "过期时间",
+      value: dayjs.duration(remaining.value, "seconds").format(`D天 HH:mm:ss`),
+    },
+    { label: "剩余下载次数", value: props?.data?.download_nums ?? 0 },
+  ];
+});
 </script>
 
 <template>
-    <div class="flex flex-col gap-5 items-center">
-        <h1 class="text-xl font-bold">下载文件</h1>
-        <FilePreviewView :value="props?.data" />
-        <div class="flex flex-col gap-2 md:flex-row w-full">
-            <div class="flex flex-row md:flex-col md:gap-1 justify-between items-center md:flex-1" v-for="item in fileShareInfo">
-                <div class="text-xs opacity-75">{{ item?.label }}</div>
-                <component v-if="isBoolean(item?.value)" :is="item?.value ? LucideCheck : LucideX" class="size-6" />
-                <div v-else class="md:text-xl">{{ item?.value }}</div>
-            </div>
-        </div>
-        <div class="w-full">
-            <AsyncButton @click="handleDownload" class="w-full">下载</AsyncButton>
-        </div>
+  <div class="flex flex-col gap-5 items-center">
+    <h1 class="text-xl font-bold">下载文件</h1>
+    <FilePreviewView :value="props?.data" />
+    <div class="flex flex-col gap-2 md:flex-row w-full">
+      <div
+        class="flex flex-row md:flex-col md:gap-1 justify-between items-center md:flex-1"
+        v-for="item in fileShareInfo"
+      >
+        <div class="text-xs opacity-75">{{ item?.label }}</div>
+        <component
+          v-if="isBoolean(item?.value)"
+          :is="item?.value ? LucideCheck : LucideX"
+          class="size-6"
+        />
+        <div v-else class="md:text-xl">{{ item?.value }}</div>
+      </div>
     </div>
-</template>
+    <div class="w-full">
+      <AsyncButton @click="handleDownload" class="w-full">下载</AsyncButton>
+    </div>
+  </div>
+</template>

front/components/Share/TextShareView.vue

@@ -1,87 +1,93 @@
 <script setup lang="ts">
-import dayjs from 'dayjs';
-import AsyncButton from '@/components/ui/button/AsyncButton.vue'
-import duration from 'dayjs/plugin/duration';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import { isBoolean } from 'lodash-es';
-import { LucideCheck, LucideX } from 'lucide-vue-next';
-import { cx } from 'class-variance-authority';
-import { toast } from 'vue-sonner';
-import MarkdownRender from '@/components/MarkdownRender.vue'
-dayjs.extend(duration)
-dayjs.extend(relativeTime)
+import dayjs from "dayjs";
+import AsyncButton from "@/components/ui/button/AsyncButton.vue";
+import duration from "dayjs/plugin/duration";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { isBoolean } from "lodash-es";
+import { LucideCheck, LucideX } from "lucide-vue-next";
+import { cx } from "class-variance-authority";
+import { toast } from "vue-sonner";
+import MarkdownRender from "@/components/MarkdownRender.vue";
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
 
 const props = defineProps<{
-    data: any
-}>()
+  data: any;
+}>();
+
+const { getShareToken } = useMyAppShare();
 
 const expireSeconds = computed(() => {
-    return dayjs(props?.data?.expire_at * 10e2).unix() - dayjs().unix()
-})
+  return dayjs(props?.data?.expire_at * 10e2).unix() - dayjs().unix();
+});
 
-const { remaining, start } = useCountdown(expireSeconds.value)
+const { remaining, start } = useCountdown(expireSeconds.value);
 
 onMounted(() => {
-    start()
-})
+  start();
+});
 
 const fileShareInfo = computed(() => {
-    return [
-        { label: '需要密码', value: props?.data?.has_password ?? false },
-        { label: '过期时间', value: dayjs.duration(remaining.value, 'seconds').format(`D天 HH:mm:ss`) },
-        { label: '剩余浏览次数', value: props?.data?.download_nums ?? 0 },
-    ]
-})
-const previewText = ref<string | null>(null)
+  return [
+    { label: "需要密码", value: props?.data?.has_password ?? false },
+    {
+      label: "过期时间",
+      value: dayjs.duration(remaining.value, "seconds").format(`D天 HH:mm:ss`),
+    },
+    { label: "剩余浏览次数", value: props?.data?.download_nums ?? 0 },
+  ];
+});
+const previewText = ref<string | null>(null);
 
 const handlePreview = async () => {
-    try {
-        const { id } = props?.data || {}
-        const data = await $fetch<{
-            code: number
-            data: {
-                token?: string
-            }
-        }>(`/api/download`, {
-            method: 'POST',
-            body: {
-                share_id: id
-            }
-        })
-        const { token } = data?.data || {}
-        if (!token) {
-            return
-        }
-        const r = await $fetch<{
-            code: number
-            data: {
-                data: string
-            }
-        }>(`/api/download?token=${token}`)
-        previewText.value = r?.data?.data
-    } catch (error) {
-        toast.error(error?.data?.message || '获取失败')
-    }
-}
+  try {
+    const token = await getShareToken(props?.data?.id);
+    const r = await $fetch<{
+      code: number;
+      data: {
+        data: string;
+      };
+    }>(`/api/download?token=${token}`);
+    previewText.value = r?.data?.data;
+  } catch (error) {
+    toast.error((error as any)?.data?.message || error);
+  }
+};
 </script>
 <template>
-    <div :class="cx('flex flex-col max-h-full', !!previewText ? 'gap-3' : 'gap-16 items-center')">
-        <h1 class="text-xl">查看文本</h1>
-        <template v-if="!previewText">
-            <div class="flex flex-col gap-2 md:flex-row w-full">
-                <div class="flex flex-row md:flex-col md:gap-1 justify-between items-center md:flex-1"
-                    v-for="item in fileShareInfo">
-                    <div class="text-xs opacity-75">{{ item?.label }}</div>
-                    <component v-if="isBoolean(item?.value)" :is="item?.value ? LucideCheck : LucideX" class="size-6" />
-                    <div v-else class="md:text-xl">{{ item?.value }}</div>
-                </div>
-            </div>
-            <div class="w-full">
-                <AsyncButton @click="handlePreview" class="w-full">浏览</AsyncButton>
-            </div>
-        </template>
-        <template v-else>
-            <MarkdownRender :markdown="previewText" class="rounded-md bg-white/70 p-3 w-full max-w-full min-h-80 overflow-y-auto" />
-        </template>
-    </div>
-</template>
+  <div
+    :class="
+      cx(
+        'flex flex-col max-h-full',
+        !!previewText ? 'gap-3' : 'gap-16 items-center',
+      )
+    "
+  >
+    <h1 class="text-xl">查看文本</h1>
+    <template v-if="!previewText">
+      <div class="flex flex-col gap-2 md:flex-row w-full">
+        <div
+          class="flex flex-row md:flex-col md:gap-1 justify-between items-center md:flex-1"
+          v-for="item in fileShareInfo"
+        >
+          <div class="text-xs opacity-75">{{ item?.label }}</div>
+          <component
+            v-if="isBoolean(item?.value)"
+            :is="item?.value ? LucideCheck : LucideX"
+            class="size-6"
+          />
+          <div v-else class="md:text-xl">{{ item?.value }}</div>
+        </div>
+      </div>
+      <div class="w-full">
+        <AsyncButton @click="handlePreview" class="w-full">浏览</AsyncButton>
+      </div>
+    </template>
+    <template v-else>
+      <MarkdownRender
+        :markdown="previewText"
+        class="rounded-md bg-white/70 p-3 w-full max-w-full min-h-80 overflow-y-auto"
+      />
+    </template>
+  </div>
+</template>

front/composables/useMyAppShare.ts

@@ -1,20 +1,45 @@
-const downloadFile = async (share_id: string) => {
-  const data = await $fetch<{
-    code: number;
-    data: {
-      token?: string;
-    };
-  }>(`/api/download`, {
-    method: "POST",
-    body: {
-      share_id,
-    },
-  });
-  const { token } = data?.data || {};
-  if (!token) {
-    return;
+import { toast } from "vue-sonner";
+
+let shareIdTokenMap: WeakMap<{ share_id: string }, string>;
+
+const getShareToken = async (share_id: string): Promise<string | undefined> => {
+  if (!shareIdTokenMap) {
+    shareIdTokenMap = new WeakMap();
+  }
+  let token = shareIdTokenMap.get({ share_id });
+  if (!token) {
+    const data = await $fetch<{
+      code: number;
+      message: string;
+      data: {
+        token?: string;
+      };
+    }>(`/api/download`, {
+      method: "POST",
+      body: {
+        share_id,
+      },
+    });
+    if (!data?.data?.token) {
+      throw new Error(data?.message || "获取token失败");
+    }
+    token = data.data.token;
+    shareIdTokenMap.set({ share_id }, token);
+  }
+  return token;
+};
+
+const downloadFile = async (share_id: string) => {
+  try {
+    const token = await getShareToken(share_id);
+    if (!token) {
+      throw new Error("获取token失败");
+      return;
+    }
+    (window as any)?.open(`/api/download?token=${token}`);
+  } catch (e) {
+    toast.error((e as any)?.data?.message || e);
   }
-  (window as any)?.open(`/api/download?token=${token}`);
 };
 
 const createShare = async (data: any) => {
@@ -66,6 +91,7 @@ const useMyAppShare = () => {
     createShare,
     createFileShare,
     createTextShare,
+    getShareToken,
   };
 };