refactor: Separate store

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();
           }
         },
       };

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);

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<NotificationItem[]>([
   {
@@ -50,6 +56,9 @@ const notifications = ref<NotificationItem[]>([
   },
 ]);
 
+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() {
       <UserDropdown
         :avatar
         :menus
-        :text="userInfo?.realName"
+        :text="userStore.userInfo?.realName"
         description="ann.vben@gmail.com"
         tag-text="Pro"
         @logout="handleLogout"
@@ -135,12 +138,12 @@ function handleMakeAll() {
     </template>
     <template #extra>
       <AuthenticationLoginExpiredModal
-        v-model:open="openLoginExpiredModal"
+        v-model:open="accessStore.loginExpired"
         :avatar
         :loading="loginLoading"
         password-placeholder="123456"
         username-placeholder="vben"
-        @submit="accessStore.authLogin"
+        @submit="authStore.authLogin"
       />
     </template>
     <template #lock-screen>

apps/web-antd/src/router/guard.ts

@@ -2,13 +2,14 @@ import type { Router } from 'vue-router';
 
 import { LOGIN_PATH } from '@vben/constants';
 import { preferences } from '@vben/preferences';
+import { useAccessStore, useUserStore } from '@vben/stores';
 import { startProgress, stopProgress } from '@vben/utils';
 
 import { useTitle } from '@vueuse/core';
 
 import { $t } from '#/locales';
 import { coreRouteNames, dynamicRoutes } from '#/router/routes';
-import { useAccessStore } from '#/store';
+import { useAuthStore } from '#/store';
 
 import { generateAccess } from './access';
 
@@ -58,10 +59,11 @@ function setupCommonGuard(router: Router) {
 function setupAccessGuard(router: Router) {
   router.beforeEach(async (to, from) => {
     const accessStore = useAccessStore();
-    const accessToken = accessStore.accessToken;
+    const userStore = useUserStore();
+    const authStore = useAuthStore();
 
     // accessToken 检查
-    if (!accessToken) {
+    if (!accessStore.accessToken) {
       if (
         // 基本路由，这些路由不需要进入权限拦截
         coreRouteNames.includes(to.name as string) ||
@@ -93,8 +95,7 @@ function setupAccessGuard(router: Router) {
 
     // 生成路由表
     // 当前登录用户拥有的角色标识列表
-    const userInfo =
-      accessStore.userInfo || (await accessStore.fetchUserInfo());
+    const userInfo = userStore.userInfo || (await authStore.fetchUserInfo());
     const userRoles = userInfo.roles ?? [];
 
     // 生成菜单和路由

apps/web-antd/src/router/index.ts

@@ -1,12 +1,10 @@
-import type { RouteRecordName, RouteRecordRaw } from 'vue-router';
-
 import {
   createRouter,
   createWebHashHistory,
   createWebHistory,
 } from 'vue-router';
 
-import { traverseTreeValues } from '@vben/utils';
+import { resetStaticRoutes } from '@vben/utils';
 
 import { createRouterGuard } from './guard';
 import { routes } from './routes';
@@ -26,33 +24,8 @@ const router = createRouter({
   // strict: true,
 });
 
-/**
- * @zh_CN 重置所有路由，如有指定白名单除外
- */
-function resetRoutes() {
-  // 获取静态路由所有节点包含子节点的 name，并排除不存在 name 字段的路由
-  const staticRouteNames = traverseTreeValues<
-    RouteRecordRaw,
-    RouteRecordName | undefined
-  >(routes, (route) => {
-    // 这些路由需要指定 name，防止在路由重置时，不能删除没有指定 name 的路由
-    if (import.meta.env.DEV && !route.name) {
-      console.warn(
-        `The route with the path ${route.path} needs to have the field name specified.`,
-      );
-    }
-    return route.name;
-  });
+const resetRoutes = () => resetStaticRoutes(router, routes);
 
-  const { getRoutes, hasRoute, removeRoute } = router;
-  const allRoutes = getRoutes();
-  allRoutes.forEach(({ name }) => {
-    // 存在于路由表且非白名单才需要删除
-    if (name && !staticRouteNames.includes(name) && hasRoute(name)) {
-      removeRoute(name);
-    }
-  });
-}
 // 创建路由守卫
 createRouterGuard(router);
 

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

@@ -1,12 +1,11 @@
 import type { LoginAndRegisterParams } from '@vben/common-ui';
-import type { MenuRecordRaw, UserInfo } from '@vben/types';
-import type { RouteRecordRaw } from 'vue-router';
+import type { UserInfo } from '@vben/types';
 
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
-import { resetAllStores, useCoreAccessStore } from '@vben/stores';
+import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
 
 import { notification } from 'ant-design-vue';
 import { defineStore } from 'pinia';
@@ -14,31 +13,12 @@ import { defineStore } from 'pinia';
 import { getAccessCodes, getUserInfo, login } from '#/api';
 import { $t } from '#/locales';
 
-export const useAccessStore = defineStore('access', () => {
-  const coreStoreAccess = useCoreAccessStore();
+export const useAuthStore = defineStore('auth', () => {
+  const accessStore = useAccessStore();
+  const userStore = useUserStore();
   const router = useRouter();
 
-  const loading = ref(false);
-
-  const openLoginExpiredModal = ref(false);
-
-  const accessToken = computed(() => coreStoreAccess.accessToken);
-  const refreshToken = computed(() => coreStoreAccess.refreshToken);
-  const userRoles = computed(() => coreStoreAccess.userRoles);
-  const userInfo = computed(() => coreStoreAccess.userInfo);
-  const accessRoutes = computed(() => coreStoreAccess.accessRoutes);
-
-  function setAccessMenus(menus: MenuRecordRaw[]) {
-    coreStoreAccess.setAccessMenus(menus);
-  }
-
-  function setAccessToken(token: null | string) {
-    coreStoreAccess.setAccessToken(token);
-  }
-
-  function setAccessRoutes(routes: RouteRecordRaw[]) {
-    coreStoreAccess.setAccessRoutes(routes);
-  }
+  const loginLoading = ref(false);
 
   /**
    * 异步处理登录操作
@@ -52,19 +32,16 @@ export const useAccessStore = defineStore('access', () => {
     // 异步处理用户登录操作并获取 accessToken
     let userInfo: null | UserInfo = null;
     try {
-      loading.value = true;
+      loginLoading.value = true;
       const { accessToken, refreshToken } = await login(params);
 
       // 如果成功获取到 accessToken
-      // If accessToken is successfully obtained
       if (accessToken) {
         // 将 accessToken 存储到 accessStore 中
-        // Store the accessToken in accessStore
-        coreStoreAccess.setAccessToken(accessToken);
-        coreStoreAccess.setRefreshToken(refreshToken);
+        accessStore.setAccessToken(accessToken);
+        accessStore.setRefreshToken(refreshToken);
 
         // 获取用户信息并存储到 accessStore 中
-        // Get user information and store it in accessStore
         const [fetchUserInfoResult, accessCodes] = await Promise.all([
           fetchUserInfo(),
           getAccessCodes(),
@@ -72,11 +49,11 @@ export const useAccessStore = defineStore('access', () => {
 
         userInfo = fetchUserInfoResult;
 
-        coreStoreAccess.setUserInfo(userInfo);
-        coreStoreAccess.setAccessCodes(accessCodes);
+        userStore.setUserInfo(userInfo);
+        accessStore.setAccessCodes(accessCodes);
 
-        if (openLoginExpiredModal.value) {
-          openLoginExpiredModal.value = false;
+        if (accessStore.loginExpired) {
+          accessStore.setLoginExpired(false);
         } else {
           onSuccess
             ? await onSuccess?.()
@@ -92,18 +69,17 @@ export const useAccessStore = defineStore('access', () => {
         }
       }
     } finally {
-      loading.value = false;
+      loginLoading.value = false;
     }
 
     return {
-      accessToken,
       userInfo,
     };
   }
 
   async function logout() {
     resetAllStores();
-    openLoginExpiredModal.value = false;
+    accessStore.setLoginExpired(false);
 
     // 回登陆页带上当前路由地址
     await router.replace({
@@ -117,29 +93,19 @@ export const useAccessStore = defineStore('access', () => {
   async function fetchUserInfo() {
     let userInfo: null | UserInfo = null;
     userInfo = await getUserInfo();
-    coreStoreAccess.setUserInfo(userInfo);
+    userStore.setUserInfo(userInfo);
     return userInfo;
   }
 
   function $reset() {
-    loading.value = false;
-    openLoginExpiredModal.value = false;
+    loginLoading.value = false;
   }
 
   return {
     $reset,
-    accessRoutes,
-    accessToken,
     authLogin,
     fetchUserInfo,
-    loading,
+    loginLoading,
     logout,
-    openLoginExpiredModal,
-    refreshToken,
-    setAccessMenus,
-    setAccessRoutes,
-    setAccessToken,
-    userInfo,
-    userRoles,
   };
 });

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

@@ -1,18 +1 @@
-import type { InitStoreOptions } from '@vben/stores';
-
-import type { App } from 'vue';
-
-import { initStore, resetAllStores, storeToRefs } from '@vben/stores';
-
-/**
- * @zh_CN 初始化pinia
- * @param app vue app 实例
- */
-async function setupStore(app: App, options: InitStoreOptions) {
-  const pinia = await initStore(options);
-  app.use(pinia);
-}
-
-export { resetAllStores, setupStore, storeToRefs };
-
-export { useAccessStore } from './modules/access';
+export * from './auth';

apps/web-antd/src/views/_core/authentication/login.vue

@@ -1,18 +1,18 @@
 <script lang="ts" setup>
 import { AuthenticationLogin } from '@vben/common-ui';
 
-import { useAccessStore } from '#/store';
+import { useAuthStore } from '#/store';
 
 defineOptions({ name: 'Login' });
 
-const accessStore = useAccessStore();
+const authStore = useAuthStore();
 </script>
 
 <template>
   <AuthenticationLogin
-    :loading="accessStore.loading"
+    :loading="authStore.loginLoading"
     password-placeholder="123456"
     username-placeholder="vben"
-    @submit="accessStore.authLogin"
+    @submit="authStore.authLogin"
   />
 </template>

apps/web-antd/src/views/dashboard/workspace/index.vue

@@ -17,12 +17,11 @@ import {
   WorkbenchTrends,
 } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
-
-import { useAccessStore } from '#/store';
+import { useUserStore } from '@vben/stores';
 
 import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';
 
-const accessStore = useAccessStore();
+const userStore = useUserStore();
 
 const projectItems: WorkbenchProjectItem[] = [
   {
@@ -201,10 +200,10 @@ const trendItems: WorkbenchTrendItem[] = [
 <template>
   <div class="p-5">
     <WorkbenchHeader
-      :avatar="accessStore.userInfo?.avatar || preferences.app.defaultAvatar"
+      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
     >
       <template #title>
-        早安, {{ accessStore.userInfo?.realName }}, 开始您一天的工作吧！
+        早安, {{ userStore.userInfo?.realName }}, 开始您一天的工作吧！
       </template>
       <template #description> 今日晴，20℃ - 32℃！ </template>
     </WorkbenchHeader>

apps/web-antd/src/views/demos/access/button-control.vue

@@ -4,10 +4,11 @@ import type { LoginAndRegisterParams } from '@vben/common-ui';
 import { useRouter } from 'vue-router';
 
 import { AccessControl, useAccess } from '@vben/access';
+import { resetAllStores, useUserStore } from '@vben/stores';
 
 import { Button } from 'ant-design-vue';
 
-import { resetAllStores, useAccessStore } from '#/store';
+import { useAuthStore } from '#/store';
 
 const accounts: Record<string, LoginAndRegisterParams> = {
   admin: {
@@ -25,21 +26,22 @@ const accounts: Record<string, LoginAndRegisterParams> = {
 };
 
 const { accessMode, hasAccessByCodes } = useAccess();
-const accessStore = useAccessStore();
+const authStore = useAuthStore();
+const userStore = useUserStore();
 const router = useRouter();
 
 function roleButtonType(role: string) {
-  return accessStore.userRoles.includes(role) ? 'primary' : 'default';
+  return userStore.userRoles.includes(role) ? 'primary' : 'default';
 }
 
 async function changeAccount(role: string) {
-  if (accessStore.userRoles.includes(role)) {
+  if (userStore.userRoles.includes(role)) {
     return;
   }
 
   const account = accounts[role];
   resetAllStores();
-  await accessStore.authLogin(account, async () => {
+  await authStore.authLogin(account, async () => {
     router.go(0);
   });
 }
@@ -58,7 +60,7 @@ async function changeAccount(role: string) {
       <div class="mb-3">
         <span class="text-lg font-semibold">当前角色:</span>
         <span class="text-primary mx-4 text-lg">
-          {{ accessStore.userRoles?.[0] }}
+          {{ userStore.userRoles?.[0] }}
         </span>
       </div>
 

apps/web-antd/src/views/demos/access/index.vue

@@ -4,10 +4,11 @@ import type { LoginAndRegisterParams } from '@vben/common-ui';
 import { useRouter } from 'vue-router';
 
 import { useAccess } from '@vben/access';
+import { resetAllStores, useUserStore } from '@vben/stores';
 
 import { Button } from 'ant-design-vue';
 
-import { resetAllStores, useAccessStore } from '#/store';
+import { useAuthStore } from '#/store';
 
 const accounts: Record<string, LoginAndRegisterParams> = {
   admin: {
@@ -25,15 +26,16 @@ const accounts: Record<string, LoginAndRegisterParams> = {
 };
 
 const { accessMode, toggleAccessMode } = useAccess();
-const accessStore = useAccessStore();
+const userStore = useUserStore();
+const accessStore = useAuthStore();
 const router = useRouter();
 
 function roleButtonType(role: string) {
-  return accessStore.userRoles.includes(role) ? 'primary' : 'default';
+  return userStore.userRoles.includes(role) ? 'primary' : 'default';
 }
 
 async function changeAccount(role: string) {
-  if (accessStore.userRoles.includes(role)) {
+  if (userStore.userRoles.includes(role)) {
     return;
   }
 
@@ -80,7 +82,7 @@ async function handleToggleAccessMode() {
       <div class="mb-3">
         <span class="text-lg font-semibold">当前账号:</span>
         <span class="text-primary mx-4 text-lg">
-          {{ accessStore.userRoles?.[0] }}
+          {{ userStore.userRoles?.[0] }}
         </span>
       </div>