chore: 分离 useIsExpired hook 添加 token 过期提示

ATQQ · Mar 16, 2024 · da4da62 · da4da62
1 parent aa79352
commit da4da62
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 14 deletions.
diff --git a/packages/client/src/components/ConfigPanel.vue b/packages/client/src/components/ConfigPanel.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
+import { useIsExpired } from '@/composables';
 import { useConfigStore } from '@/store';
 import { formatDate } from '@/utils/stringUtil';
 import { Key, Refresh } from '@element-plus/icons-vue';
-import { useIntervalFn, useWindowSize } from '@vueuse/core';
+import { useWindowSize } from '@vueuse/core';
 import { ElMessage, ElMessageBox, ElButton } from 'element-plus';
 import { storeToRefs } from 'pinia';
 import { computed, onMounted, ref } from 'vue';
@@ -11,19 +12,10 @@ const { qiniu } = storeToRefs(store)
 const dialogVisible = ref(false)
 const expiredTime = ref('')
 const countDown = ref('')
-const isExpired = ref(false)
-
-useIntervalFn(() => {
-    isExpired.value = qiniu.value.date <= Date.now()
-    if(isExpired.value){
-        // 过期了，尝试自动取默认的token
-        localStorage.removeItem('qiniu-token')
-        store.parseQiniuToken()
-    }
-}, 500)
+const isExpired = useIsExpired()
 
 const handleGetToken = () => {
-  window.open('https://github.com/ATQQ/image-bed-qiniu/tree/master/packages/client#%E7%94%9F%E6%88%90token')
+    window.open('https://github.com/ATQQ/image-bed-qiniu/tree/master/packages/client#%E7%94%9F%E6%88%90token')
 }
 onMounted(() => {
     refreshDDL()

diff --git a/packages/client/src/components/HomeHeader.vue b/packages/client/src/components/HomeHeader.vue
@@ -1,5 +1,8 @@
 <script lang="ts" setup>
+import { useIsExpired } from '@/composables';
 import ConfigPanel from './ConfigPanel.vue';
+const isExpired = useIsExpired()
+import { ElAlert } from 'element-plus';
 </script>
 <template>
     <header>
@@ -14,6 +17,7 @@ import ConfigPanel from './ConfigPanel.vue';
             </a>
         </span>
     </header>
+    <el-alert class="expired" center v-if="isExpired" title="token 已经过期，请点击右上角 🔑 更新" type="error" show-icon />
 </template>
 <style scoped lang="scss">
 header {
@@ -39,4 +43,9 @@ header {
         text-decoration: none;
     }
 }
+
+.expired{
+    max-width: 400px;
+    margin: 0 auto;
+}
 </style>
diff --git a/packages/client/src/composables/index.ts b/packages/client/src/composables/index.ts
@@ -1,5 +1,7 @@
-import { computed } from 'vue'
-import { useLocalStorage, useWindowSize } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { useIntervalFn, useLocalStorage, useWindowSize } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import { useConfigStore } from '@/store'
 export function useIsMobile() {
   // 使用正则表达式检查userAgent字符串是否匹配移动设备
   const mobileRegex
@@ -28,3 +30,19 @@ export function useUploadConfig() {
   const cacheConfig = useLocalStorage('uploadConfig', defaultUploadConfig)
   return cacheConfig
 }
+
+export function useIsExpired() {
+  const store = useConfigStore()
+  const { qiniu } = storeToRefs(store)
+  const isExpired = ref(qiniu.value.date <= Date.now())
+
+  useIntervalFn(() => {
+    isExpired.value = qiniu.value.date <= Date.now()
+    if (isExpired.value) {
+      // 过期了，尝试自动取默认的token
+      localStorage.removeItem('qiniu-token')
+      store.parseQiniuToken()
+    }
+  }, 500)
+  return isExpired
+}