🐛 fix qrlogin refresh issue

src/store/modules/clientStore.ts

@@ -1,10 +1,54 @@
 import {defineStore} from 'pinia';
 import {ref} from "vue";
 
+const expiresTime: number = 60 * 30; // 自定义过期时间 30 分钟
+const expiredStorage: Storage = getExpiredStorage(localStorage, expiresTime);
+
+function getExpiredStorage(storage: Storage, expiresTime: string | number | Date) {
+    return {
+        getItem(key: string) {
+            const itemStr = storage.getItem(key);
+            if (!itemStr) {
+                return null;
+            }
+            // 读取的时候是字符串，需要转换为对象
+            const item = JSON.parse(itemStr);
+            const now: Date = new Date();
+            if (now.getTime() > item.expiry) {
+                storage.removeItem(key);
+                return null;
+            }
+            // pinia 的持久化插件要求返回JSON字符串
+            return JSON.stringify(item.value);
+        },
+        setItem(key: string, value: string) {
+            const now = new Date();
+            const item = {
+                value: JSON.parse(value), // value是JSON字符串，需要转换为对象
+                expiry: now.getTime() + Number(expiresTime) * 1000,
+            };
+            storage.setItem(key, JSON.stringify(item)); // 存储又要转为JSON字符串
+        },
+        removeItem(key: string) {
+            storage.removeItem(key);
+        },
+        clear() {
+            Object.keys(storage).forEach((key: string) => {
+                storage.removeItem(key);
+            });
+        },
+        key(index: number): string | null {
+            const keys = Object.keys(storage);
+            return keys[index] || null;
+        },
+        length: Object.keys(storage).length,
+    } as Storage;
+}
+
 export const useClientStore = defineStore(
     'clientId',
     () => {
-        const clientId = ref<string>('');
+        const clientId = ref<string>();
 
         function setClientId(id: string) {
             clientId.value = id;
@@ -20,12 +64,13 @@ export const useClientStore = defineStore(
             getClientId
         };
     },
-    // {
-    //     // 开启数据持久化
-    //     persist: {
-    //         key: 'clientId',
-    //         storage: localStorage,
-    //         paths: ["clientId"],
-    //     }
-    // }
+    {
+        // 开启数据持久化
+        persist: {
+            key: 'clientId',
+            storage: expiredStorage,
+            paths: ["clientId"],
+        }
+    }
 );
+

src/views/Login/LoginFooter.vue

@@ -84,7 +84,7 @@ async function getClientId() {
  *  获取本地client_id
  */
 async function getLocalClientId() {
-  if (client.getClientId() !== '' && client.getClientId() !== null) {
+  if (client.getClientId()) {
     return client.getClientId();
   } else {
     await getClientId();

src/views/QRLogin/QRLogin.vue

@@ -68,7 +68,7 @@ import {generateClientId, getUserDevice} from "@/api/oauth";
 const {t} = useI18n();
 
 const router = useRouter();
-
+const client = useStore().client;
 const qrcode = ref<string>('');
 const status = ref<string>('loading');
 
@@ -76,7 +76,6 @@ const status = ref<string>('loading');
  *  获取client_id
  */
 async function getClientId() {
-  const client = useStore().client;
   const res: any = await generateClientId();
   if (res.code === 0 && res.data) {
     client.setClientId(res.data);
@@ -88,7 +87,6 @@ async function getClientId() {
  *  获取二维码
  */
 async function getQrCode() {
-  const client = useStore().client;
   if (!client.getClientId()) {
     status.value = 'expired';
     await getClientId();
@@ -98,6 +96,7 @@ async function getQrCode() {
     if (res.code === 0 && res.data) {
       status.value = 'active';
       qrcode.value = res.data;
+      await handleListenMessage();
     } else {
       status.value = 'expired';
     }
@@ -108,7 +107,6 @@ async function getQrCode() {
  *  获取本地client_id
  */
 function getLocalClientId() {
-  const client = useStore().client;
   if (client.getClientId()) {
     return client.getClientId();
   } else {
@@ -123,8 +121,10 @@ const wsOptions = {
 
 const {open, close, on} = useWebSocket(wsOptions);
 
-onMounted(async () => {
-  await getQrCode();
+/**
+ *  监听消息
+ */
+async function handleListenMessage() {
   open();
   // 注册消息接收处理函数
   on('message', async (data: any) => {
@@ -143,8 +143,11 @@ onMounted(async () => {
       }, 1000);
     }
   });
-});
+}
 
+onMounted(async () => {
+  await getQrCode();
+});
 
 onUnmounted(async () => {
   close(true);

src/views/QRLogin/QRLoginFooter.vue

@@ -85,7 +85,7 @@ async function getClientId() {
  *  获取本地client_id
  */
 async function getLocalClientId() {
-  if (client.getClientId() !== '' && client.getClientId() !== null) {
+  if (client.getClientId()) {
     return client.getClientId();
   } else {
     await getClientId();