refactor(web-antd): 优化 WebSocket 初始化和管理

- 在 auth store 中添加 WebSocket 初始化和断开逻辑

apps/web-antd/src/bootstrap.ts

@@ -16,7 +16,6 @@ import { initComponentAdapter } from './adapter/component'
 import { initSetupVbenForm } from './adapter/form'
 import App from './app.vue'
 import { router } from './router'
-import { initWebSocket } from '#/api/websocket'
 
 
 
@@ -54,9 +53,6 @@ async function bootstrap(namespace: string) {
   // 配置 pinia-tore
   await initStores(app, { namespace })
 
-  // 初始化WebSocket
-  initWebSocket()
-
   // 安装权限指令
   registerAccessDirective(app)
 

apps/web-antd/src/store/auth.ts

@@ -1,27 +1,29 @@
-import type { LoginAndRegisterParams } from '@vben/common-ui';
+import type { LoginAndRegisterParams } from '@vben/common-ui'
-import type { UserInfo } from '@vben/types';
+import type { UserInfo } from '@vben/types'
 
-import { ref } from 'vue';
+import { ref } from 'vue'
-import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router'
 
-import { LOGIN_PATH } from '@vben/constants';
+import { LOGIN_PATH } from '@vben/constants'
-import { preferences } from '@vben/preferences';
+import { preferences } from '@vben/preferences'
-import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
+import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores'
 
-import { notification } from 'ant-design-vue';
+import { notification } from 'ant-design-vue'
-import { defineStore } from 'pinia';
+import { defineStore } from 'pinia'
 
-import { doLogout, getUserInfoApi, loginApi, seeConnectionClose } from '#/api';
+import { doLogout, getUserInfoApi, loginApi, seeConnectionClose } from '#/api'
-import { $t } from '#/locales';
+import { $t } from '#/locales'
 
-import { useDictStore } from './dict';
+import { useDictStore } from './dict'
+
+import { initWebSocket, getWebSocketService } from '#/api/websocket'
 
 export const useAuthStore = defineStore('auth', () => {
-  const accessStore = useAccessStore();
+  const accessStore = useAccessStore()
-  const userStore = useUserStore();
+  const userStore = useUserStore()
-  const router = useRouter();
+  const router = useRouter()
 
-  const loginLoading = ref(false);
+  const loginLoading = ref(false)
 
   /**
    * 异步处理登录操作
@@ -33,30 +35,30 @@ export const useAuthStore = defineStore('auth', () => {
     onSuccess?: () => Promise<void> | void,
   ) {
     // 异步处理用户登录操作并获取 accessToken
-    let userInfo: null | UserInfo = null;
+    let userInfo: null | UserInfo = null
     try {
-      loginLoading.value = true;
+      loginLoading.value = true
-      const { access_token } = await loginApi(params);
+      const { access_token } = await loginApi(params)
 
       // 将 accessToken 存储到 accessStore 中
-      accessStore.setAccessToken(access_token);
+      accessStore.setAccessToken(access_token)
-      accessStore.setRefreshToken(access_token);
+      accessStore.setRefreshToken(access_token)
 
       // 获取用户信息并存储到 accessStore 中
-      userInfo = await fetchUserInfo();
+      userInfo = await fetchUserInfo()
       /**
        * 设置用户信息
        */
-      userStore.setUserInfo(userInfo);
+      userStore.setUserInfo(userInfo)
       /**
        * 在这里设置权限
        */
-      accessStore.setAccessCodes(userInfo.permissions);
+      accessStore.setAccessCodes(userInfo.permissions)
 
       if (accessStore.loginExpired) {
-        accessStore.setLoginExpired(false);
+        accessStore.setLoginExpired(false)
       } else {
-        onSuccess ? await onSuccess?.() : await router.push('/analytics');
+        onSuccess ? await onSuccess?.() : await router.push('/analytics')
       }
 
       if (userInfo?.realName) {
@@ -64,48 +66,55 @@ export const useAuthStore = defineStore('auth', () => {
           description: `${$t('authentication.loginSuccessDesc')}:${userInfo?.realName}`,
           duration: 3,
           message: $t('authentication.loginSuccess'),
-        });
+        })
       }
     } finally {
-      loginLoading.value = false;
+      loginLoading.value = false
     }
 
     return {
       userInfo,
-    };
+    }
   }
 
   async function logout(redirect: boolean = true) {
     try {
-      await seeConnectionClose();
+      await seeConnectionClose()
-      await doLogout();
+      await doLogout()
+      /**
+       * 断开websocket连接
+       */
+      const ws = getWebSocketService();
+      if(ws) {
+        ws.close();
+      }
     } catch (error) {
-      console.error(error);
+      console.error(error)
     } finally {
-      resetAllStores();
+      resetAllStores()
-      accessStore.setLoginExpired(false);
+      accessStore.setLoginExpired(false)
 
       // 回登陆页带上当前路由地址
       await router.replace({
         path: LOGIN_PATH,
         query: redirect
           ? {
-              redirect: encodeURIComponent(router.currentRoute.value.fullPath),
+            redirect: encodeURIComponent(router.currentRoute.value.fullPath),
-            }
+          }
           : {},
-      });
+      })
     }
   }
 
   async function fetchUserInfo() {
-    const backUserInfo = await getUserInfoApi();
+    const backUserInfo = await getUserInfoApi()
     /**
      * 登录超时的情况
      */
     if (!backUserInfo) {
-      throw new Error('获取用户信息失败.');
+      throw new Error('获取用户信息失败.')
     }
-    const { permissions = [], roles = [], user } = backUserInfo;
+    const { permissions = [], roles = [], user } = backUserInfo
     /**
      * 从后台user -> vben user转换
      */
@@ -116,19 +125,25 @@ export const useAuthStore = defineStore('auth', () => {
       roles,
       userId: user.userId,
       username: user.userName,
-    };
+    }
-    userStore.setUserInfo(userInfo);
+    userStore.setUserInfo(userInfo)
+
+    /**
+     * 初始化websocket
+     */
+    initWebSocket()
+
     /**
      * 需要重新加载字典
      * 比如退出登录切换到其他租户
      */
-    const dictStore = useDictStore();
+    const dictStore = useDictStore()
-    dictStore.resetCache();
+    dictStore.resetCache()
-    return userInfo;
+    return userInfo
   }
 
   function $reset() {
-    loginLoading.value = false;
+    loginLoading.value = false
   }
 
   return {
@@ -137,5 +152,5 @@ export const useAuthStore = defineStore('auth', () => {
     fetchUserInfo,
     loginLoading,
     logout,
-  };
+  }
-});
+})