Refactor user store and persist configuration

stores/user.ts

@@ -1,113 +1,106 @@
-import { defineStore, skipHydrate } from "pinia";
-import refreshToken from "~/utils/RefreshToken";
-import { getUserInfo } from "~/api/common/index";
-import type { AppMemberUserInfoRespVO } from "~/api/common/types";
-import MQTTClient from "~/utils/mqttClient";
-import { socialLoginByCode } from "~/api/pay";
-
-export default defineStore("useUserStore", {
+import { defineStore, skipHydrate } from 'pinia'
+import refreshToken from '~/utils/RefreshToken'
+import { getUserInfo } from '~/api/common/index'
+import type { AppMemberUserInfoRespVO } from '~/api/common/types'
+import MQTTClient from '~/utils/mqttClient'
+import { socialLoginByCode } from '~/api/pay'
 
+export default defineStore('useUserStore', {
   state: () => ({
     token: refreshToken.getToken().token || '',
-    refreshToken: refreshToken.getToken().refreshToken || "",
-    userId: refreshToken.getToken().userId || "",
-    userName: refreshToken.getToken().userName || "",
-    userInfoRes: (refreshToken.getToken().userInfo ||
-      {}) as AppMemberUserInfoRespVO,
+    refreshToken: refreshToken.getToken().refreshToken || '',
+    userId: refreshToken.getToken().userId || '',
+    userName: refreshToken.getToken().userName || '',
+    userInfoRes: (refreshToken.getToken().userInfo || {}) as AppMemberUserInfoRespVO,
     mqttClient: null as MQTTClient | null,
   }),
   actions: {
     setToken(token: string) {
-      this.token = token;      
+      this.token = token
     },
     setRefreshToken(refreshToken: string) {
-      this.refreshToken = refreshToken;
+      this.refreshToken = refreshToken
     },
     setUserId(userId: string) {
-      this.userId = userId;
+      this.userId = userId
     },
     setUserName(userName: string) {
-      this.userName = userName;
+      this.userName = userName
     },
     logout() {
-      refreshToken.removeToken();
+      refreshToken.removeToken()
+      localStorage.removeItem('tuxixi-store')
       if (self === top) {
-        navigateTo("/");
+        navigateTo('/')
       } else {
-        window.top?.postMessage({ event: "logout" }, "*");
+        window.top?.postMessage({ event: 'logout' }, '*')
       }
     },
     async getUserInfo() {
-      const user = useUserInfo();
-      const res = await getUserInfo();
+      const user = useUserInfo()
+      const res = await getUserInfo()
       if (res.code === 0) {
-        this.userInfoRes = res.data;
-        refreshToken.setUserInfo(res.data);
-        user.value = res.data;
+        this.userInfoRes = res.data
+        refreshToken.setUserInfo(res.data)
+        user.value = res.data
         // 建立连接mqtt
-        this.connectMqtt();
+        this.connectMqtt()
       }
     },
     // 建立连接mqtt
     async connectMqtt() {
       if (import.meta.client) {
-        this.mqttClient = new MQTTClient("wss://www.tuxixi.net/mqtt", {
+        this.mqttClient = new MQTTClient('wss://www.tuxixi.net/mqtt', {
           clientId: this.userInfoRes.id,
-        });
-        await this.mqttClient.connect();
-        await this.mqttClient?.subscribe(
-          `zbjk_message_single/${this.userInfoRes.id}`
-        );
-        await this.mqttClient?.subscribe(
-          `zbjk_message_kefu/${this.userInfoRes.id}`
-        );
+        })
+        await this.mqttClient.connect()
+        await this.mqttClient?.subscribe(`zbjk_message_single/${this.userInfoRes.id}`)
+        await this.mqttClient?.subscribe(`zbjk_message_kefu/${this.userInfoRes.id}`)
       }
     },
     async getToken(row: any) {
-      const app = useNuxtApp();
+      const app = useNuxtApp()
       try {
         // 验证state
-        if (
-          localStorage.getItem("wechat_login_state") !== row.state &&
-          localStorage.getItem("qq_login_state") !== row.state
-        ) {
-          ElMessage.error("验证失败,请重新登录");
-          return;
+        if (localStorage.getItem('wechat_login_state') !== row.state && localStorage.getItem('qq_login_state') !== row.state) {
+          ElMessage.error('验证失败,请重新登录')
+          return
         }
 
         const res = await socialLoginByCode({
           code: row.code,
           state: row.state,
           type: Number(row.type), // type: 32-微信开放平台 35-腾讯QQ
-        });
+        })
 
-        const { code, data } = res;
+        const { code, data } = res
         if (code === 0 && data.openid) {
           // 打开登录界面
           if (!data.accessToken) {
-            ElMessage.error("因你未绑定手机号，请先绑定手机号");
-            app.$openLogin("verify", row.code, row.type, row.state);
+            ElMessage.error('因你未绑定手机号，请先绑定手机号')
+            app.$openLogin('verify', row.code, row.type, row.state)
           } else {
-            refreshToken.setToken(data.accessToken, data.refreshToken);
-            refreshToken.setUserId(data.userId.toString());
+            refreshToken.setToken(data.accessToken, data.refreshToken)
+            refreshToken.setUserId(data.userId.toString())
             // refreshToken.setUserName(loginForm.mobile)
-            this.setToken(data.accessToken);
-            this.setUserId(data.userId.toString());
+            this.setToken(data.accessToken)
+            this.setUserId(data.userId.toString())
             // userStore.setUserName(loginForm.mobile)
-            this.setRefreshToken(data.refreshToken);
+            this.setRefreshToken(data.refreshToken)
             // 获取信息
-            await this.getUserInfo();
+            await this.getUserInfo()
           }
         } else {
-          console.error("获取token失败:", res.msg);
+          console.error('获取token失败:', res.msg)
         }
       } catch (error) {
-        console.error("getToken error:", error);
+        console.error('getToken error:', error)
       }
     },
   },
-    persist: import.meta.client && {
-      storage: localStorage,
-      pick: ['token', 'refreshToken', 'userId', 'userName', 'userInfoRes'],
-    }
-});
+  persist: import.meta.client && {
+    key: 'tuxixi-store',
+    storage: localStorage,
+    pick: ['token', 'refreshToken', 'userId', 'userName', 'userInfoRes'],
+  },
+})