From ea3b61ea8b21f56489a0c90ff9f63735976d7660 Mon Sep 17 00:00:00 2001 From: zcxlsm Date: Tue, 2 Sep 2025 14:56:41 +0800 Subject: [PATCH] =?UTF-8?q?refactor(web-antd):=20=E4=BC=98=E5=8C=96=20WebS?= =?UTF-8?q?ocket=20=E5=88=9D=E5=A7=8B=E5=8C=96=E5=92=8C=E7=AE=A1=E7=90=86?= =?UTF-8?q?=20-=20=E5=9C=A8=20auth=20store=20=E4=B8=AD=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=20WebSocket=20=E5=88=9D=E5=A7=8B=E5=8C=96=E5=92=8C=E6=96=AD?= =?UTF-8?q?=E5=BC=80=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-antd/src/bootstrap.ts | 4 -- apps/web-antd/src/store/auth.ts | 111 ++++++++++++++++++-------------- 2 files changed, 63 insertions(+), 52 deletions(-) diff --git a/apps/web-antd/src/bootstrap.ts b/apps/web-antd/src/bootstrap.ts index e1c883d1..41501005 100644 --- a/apps/web-antd/src/bootstrap.ts +++ b/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) diff --git a/apps/web-antd/src/store/auth.ts b/apps/web-antd/src/store/auth.ts index cd8c4b9f..56a6fdd2 100644 --- a/apps/web-antd/src/store/auth.ts +++ b/apps/web-antd/src/store/auth.ts @@ -1,27 +1,29 @@ -import type { LoginAndRegisterParams } from '@vben/common-ui'; -import type { UserInfo } from '@vben/types'; +import type { LoginAndRegisterParams } from '@vben/common-ui' +import type { UserInfo } from '@vben/types' -import { ref } from 'vue'; -import { useRouter } from 'vue-router'; +import { ref } from 'vue' +import { useRouter } from 'vue-router' -import { LOGIN_PATH } from '@vben/constants'; -import { preferences } from '@vben/preferences'; -import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores'; +import { LOGIN_PATH } from '@vben/constants' +import { preferences } from '@vben/preferences' +import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores' -import { notification } from 'ant-design-vue'; -import { defineStore } from 'pinia'; +import { notification } from 'ant-design-vue' +import { defineStore } from 'pinia' -import { doLogout, getUserInfoApi, loginApi, seeConnectionClose } from '#/api'; -import { $t } from '#/locales'; +import { doLogout, getUserInfoApi, loginApi, seeConnectionClose } from '#/api' +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 userStore = useUserStore(); - const router = useRouter(); + const accessStore = useAccessStore() + const userStore = useUserStore() + const router = useRouter() - const loginLoading = ref(false); + const loginLoading = ref(false) /** * 异步处理登录操作 @@ -33,30 +35,30 @@ export const useAuthStore = defineStore('auth', () => { onSuccess?: () => Promise | void, ) { // 异步处理用户登录操作并获取 accessToken - let userInfo: null | UserInfo = null; + let userInfo: null | UserInfo = null try { - loginLoading.value = true; - const { access_token } = await loginApi(params); + loginLoading.value = true + const { access_token } = await loginApi(params) // 将 accessToken 存储到 accessStore 中 - accessStore.setAccessToken(access_token); - accessStore.setRefreshToken(access_token); + accessStore.setAccessToken(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 doLogout(); + await seeConnectionClose() + await doLogout() + /** + * 断开websocket连接 + */ + const ws = getWebSocketService(); + if(ws) { + ws.close(); + } } catch (error) { - console.error(error); + console.error(error) } finally { - resetAllStores(); - accessStore.setLoginExpired(false); + resetAllStores() + 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(); - dictStore.resetCache(); - return userInfo; + const dictStore = useDictStore() + dictStore.resetCache() + return userInfo } function $reset() { - loginLoading.value = false; + loginLoading.value = false } return { @@ -137,5 +152,5 @@ export const useAuthStore = defineStore('auth', () => { fetchUserInfo, loginLoading, logout, - }; -}); + } +})