From 89dcf522f5c135358a15993a7cea7591fe8bc040 Mon Sep 17 00:00:00 2001 From: vben Date: Tue, 30 Jul 2024 21:10:28 +0800 Subject: [PATCH] refactor: Separate store --- apps/web-antd/src/api/request.ts | 8 ++- apps/web-antd/src/bootstrap.ts | 8 +-- apps/web-antd/src/layouts/basic.vue | 27 +++---- apps/web-antd/src/router/guard.ts | 11 +-- apps/web-antd/src/router/index.ts | 31 +------- .../src/store/{modules/access.ts => auth.ts} | 72 +++++-------------- apps/web-antd/src/store/index.ts | 19 +---- .../src/views/_core/authentication/login.vue | 8 +-- .../src/views/dashboard/workspace/index.vue | 9 ++- .../src/views/demos/access/button-control.vue | 14 ++-- .../web-antd/src/views/demos/access/index.vue | 12 ++-- packages/effects/access/src/directive.ts | 2 +- packages/effects/access/src/use-access.ts | 9 +-- packages/effects/hooks/src/use-refresh.ts | 6 +- packages/effects/hooks/src/use-tabs.ts | 38 +++++----- .../layouts/src/basic/content/content.vue | 4 +- .../layouts/src/basic/header/header.vue | 4 +- packages/effects/layouts/src/basic/layout.vue | 10 +-- .../layouts/src/basic/menu/use-extra-menu.ts | 4 +- .../layouts/src/basic/menu/use-mixed-menu.ts | 4 +- .../layouts/src/basic/tabbar/tabbar.vue | 10 +-- .../layouts/src/basic/tabbar/use-tabbar.ts | 21 +++--- .../layouts/src/iframe/iframe-router-view.vue | 10 +-- .../src/widgets/lock-screen/lock-screen.vue | 8 +-- .../widgets/user-dropdown/user-dropdown.vue | 6 +- packages/stores/src/modules/access.test.ts | 53 ++------------ packages/stores/src/modules/access.ts | 55 +++----------- packages/stores/src/modules/index.ts | 1 + packages/stores/src/modules/lock.test.ts | 10 +-- packages/stores/src/modules/lock.ts | 2 +- packages/stores/src/modules/tabbar.test.ts | 34 ++++----- packages/stores/src/modules/tabbar.ts | 8 +-- packages/stores/src/modules/user.test.ts | 37 ++++++++++ packages/stores/src/modules/user.ts | 63 ++++++++++++++++ packages/stores/src/setup.ts | 5 +- packages/utils/src/helpers/index.ts | 1 + packages/utils/src/helpers/reset-routes.ts | 31 ++++++++ pnpm-lock.yaml | 8 ++- website/src/guide/essentials/server.md | 8 ++- website/src/guide/in-depth/access.md | 12 ++-- 40 files changed, 338 insertions(+), 345 deletions(-) rename apps/web-antd/src/store/{modules/access.ts => auth.ts} (53%) create mode 100644 packages/stores/src/modules/user.test.ts create mode 100644 packages/stores/src/modules/user.ts create mode 100644 packages/utils/src/helpers/reset-routes.ts diff --git a/apps/web-antd/src/api/request.ts b/apps/web-antd/src/api/request.ts index 817d0d6da..7cd11e27d 100644 --- a/apps/web-antd/src/api/request.ts +++ b/apps/web-antd/src/api/request.ts @@ -6,10 +6,11 @@ import type { HttpResponse } from '@vben/request'; import { useAppConfig } from '@vben/hooks'; import { preferences } from '@vben/preferences'; import { RequestClient } from '@vben/request'; +import { useAccessStore } from '@vben/stores'; import { message } from 'ant-design-vue'; -import { useAccessStore } from '#/store'; +import { useAuthStore } from '#/store'; const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD); @@ -30,13 +31,14 @@ function createRequestClient(baseURL: string) { }, unAuthorizedHandler: async () => { const accessStore = useAccessStore(); + const authStore = useAuthStore(); accessStore.setAccessToken(null); if (preferences.app.loginExpiredMode === 'modal') { - accessStore.openLoginExpiredModal = true; + accessStore.setLoginExpired(true); } else { // 退出登录 - await accessStore.logout(); + await authStore.logout(); } }, }; diff --git a/apps/web-antd/src/bootstrap.ts b/apps/web-antd/src/bootstrap.ts index 8c466684a..1be9bbe00 100644 --- a/apps/web-antd/src/bootstrap.ts +++ b/apps/web-antd/src/bootstrap.ts @@ -1,11 +1,11 @@ import { createApp } from 'vue'; -import { useAccessDirective } from '@vben/access'; +import { registerAccessDirective } from '@vben/access'; +import { initStores } from '@vben/stores'; import '@vben/styles'; import '@vben/styles/antd'; import { setupI18n } from '#/locales'; -import { setupStore } from '#/store'; import App from './app.vue'; import { router } from './router'; @@ -17,10 +17,10 @@ async function bootstrap(namespace: string) { await setupI18n(app); // 配置 pinia-tore - await setupStore(app, { namespace }); + await initStores(app, { namespace }); // 安装权限指令 - useAccessDirective(app); + registerAccessDirective(app); // 配置路由及路由守卫 app.use(router); diff --git a/apps/web-antd/src/layouts/basic.vue b/apps/web-antd/src/layouts/basic.vue index e7259ecac..ab1832c25 100644 --- a/apps/web-antd/src/layouts/basic.vue +++ b/apps/web-antd/src/layouts/basic.vue @@ -13,11 +13,17 @@ import { UserDropdown, } from '@vben/layouts'; import { preferences } from '@vben/preferences'; +import { + resetAllStores, + storeToRefs, + useAccessStore, + useUserStore, +} from '@vben/stores'; import { openWindow } from '@vben/utils'; import { $t } from '#/locales'; import { resetRoutes } from '#/router'; -import { resetAllStores, storeToRefs, useAccessStore } from '#/store'; +import { useAuthStore } from '#/store'; const notifications = ref([ { @@ -50,6 +56,9 @@ const notifications = ref([ }, ]); +const userStore = useUserStore(); +const authStore = useAuthStore(); +const accessStore = useAccessStore(); const showDot = computed(() => notifications.value.some((item) => !item.isRead), ); @@ -84,16 +93,10 @@ const menus = computed(() => [ }, ]); -const accessStore = useAccessStore(); - -const { - loading: loginLoading, - openLoginExpiredModal, - userInfo, -} = storeToRefs(accessStore); +const { loginLoading } = storeToRefs(authStore); const avatar = computed(() => { - return userInfo.value?.avatar ?? preferences.app.defaultAvatar; + return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar; }); const router = useRouter(); @@ -119,7 +122,7 @@ function handleMakeAll() {