feat: add permissionCacheType setting

vben
1 parent 6e03e050
Showing 15 changed files with 123 additions and 87 deletions
src/enums/cacheEnum.ts
src/hooks/core/useTimeout.ts
src/hooks/setting/useTransitionSetting.ts
src/hooks/web/useLockPage.ts
src/layouts/default/multitabs/index.less
src/layouts/default/multitabs/index.tsx
src/layouts/default/multitabs/useAffixTabs.ts
src/layouts/default/multitabs/useTabDropdown.ts
src/router/guard/index.ts
src/settings/projectSetting.ts
src/setup/App.ts
src/store/modules/app.ts
src/store/modules/user.ts
src/types/config.d.ts
src/utils/helper/persistent.ts
@@ -18,3 +18,8 @@ export const BASE_LOCAL_CACHE_KEY = &#39;LOCAL__CACHE__KEY__&#39;;
 // base global session key
 export const BASE_SESSION_CACHE_KEY = 'SESSION__CACHE__KEY__';
+
+export enum CacheTypeEnum {
+  SESSION,
+  LOCAL,
+}
@@ -23,7 +23,7 @@ export function useTimeoutFn(handle: Fn&lt;any&gt;, wait: number) {
 export function useTimeoutRef(wait: number) {
   const readyRef = ref(false);
-  let timer: ReturnType<typeof setTimeout> | undefined;
+  let timer: TimeoutHandle;
   function stop(): void {
     readyRef.value = false;
     timer && window.clearTimeout(timer);
@@ -7,7 +7,7 @@ import { appStore } from &#39;/@/store/modules/app&#39;;
 export function useTransitionSetting() {
   const getTransitionSetting = computed(() => appStore.getProjectConfig.transitionSetting);
-  const getEnableTransition = computed(() => unref(getTransitionSetting).enable);
+  const getEnableTransition = computed(() => unref(getTransitionSetting)?.enable);
   const getOpenNProgress = computed(() => unref(getTransitionSetting)?.openNProgress);
@@ -5,7 +5,7 @@ import { appStore } from &#39;/@/store/modules/app&#39;;
 import { userStore } from '/@/store/modules/user';
 export function useLockPage() {
-  let timeId: ReturnType<typeof setTimeout>;
+  let timeId: TimeoutHandle;
   function clear(): void {
     window.clearTimeout(timeId);
@@ -40,12 +40,9 @@
           height: 12px;
           font-size: 12px;
           color: inherit;
-          visibility: hidden;
           transition: none;
           &:hover {
-            visibility: visible;
-
             svg {
               width: 0.8em;
             }
@@ -72,10 +69,6 @@
           display: none;
         }
-        .ant-tabs-close-x {
-          visibility: visible;
-        }
-
         svg {
           width: 0.7em;
           fill: @white;
+import './index.less';
+
 import type { TabContentProps } from './tab.data';
 import type { TabItem } from '/@/store/modules/tab';
 import type { AppRouteRecordRaw } from '/@/router/types';
-import { defineComponent, watch, computed, unref, toRaw } from 'vue';
+import { defineComponent, watch, computed, unref } from 'vue';
 import { useRouter } from 'vue-router';
-import router from '/@/router';
 import { Tabs } from 'ant-design-vue';
 import TabContent from './TabContent';
@@ -18,12 +19,12 @@ import { userStore } from &#39;/@/store/modules/user&#39;;
 import { closeTab } from './useTabDropdown';
 import { useTabs } from '/@/hooks/web/useTabs';
+import { initAffixTabs } from './useAffixTabs';
-import './index.less';
 export default defineComponent({
-  name: 'MultiTabs',
+  name: 'MultipleTabs',
   setup() {
-    let isAddAffix = false;
+    initAffixTabs();
     const go = useGo();
@@ -36,11 +37,6 @@ export default defineComponent({
     watch(
       () => tabStore.getLastChangeRouteState,
       () => {
-        if (!isAddAffix) {
-          addAffixTabs();
-          isAddAffix = true;
-        }
-
         const lastChangeRoute = unref(tabStore.getLastChangeRouteState);
         if (!lastChangeRoute || !userStore.getTokenState) return;
@@ -56,39 +52,15 @@ export default defineComponent({
       }
     );
-    /**
-     * @description: 过滤所有固定路由
-     */
-    function filterAffixTabs(routes: AppRouteRecordRaw[]) {
-      const tabs: TabItem[] = [];
-      routes &&
-        routes.forEach((route) => {
-          if (route.meta && route.meta.affix) {
-            tabs.push(toRaw(route) as TabItem);
-          }
-        });
-      return tabs;
-    }
-
-    /**
-     * @description: 设置固定tabs
-     */
-    function addAffixTabs(): void {
-      const affixTabs = filterAffixTabs((router.getRoutes() as unknown) as AppRouteRecordRaw[]);
-      for (const tab of affixTabs) {
-        tabStore.commitAddTab(tab);
-      }
-    }
-
     // tab切换
     function handleChange(activeKey: any) {
       activeKeyRef.value = activeKey;
       go(activeKey, false);
     }
-    // 关闭当前ab
+    // 关闭当前tab
     function handleEdit(targetKey: string) {
-      // 新增操作隐藏，目前只使用删除操作
+      // Added operation to hide, currently only use delete operation
       const index = unref(getTabsState).findIndex(
         (item) => (item.fullPath || item.path) === targetKey
       );
@@ -107,12 +79,13 @@ export default defineComponent({
         </span>
       );
     }
+
     function renderTabs() {
       return unref(getTabsState).map((item: TabItem) => {
         const key = item.query ? item.fullPath : item.path;
-
+        const closable = !(item && item.meta && item.meta.affix);
         return (
-          <Tabs.TabPane key={key} closable={!(item && item.meta && item.meta.affix)}>
+          <Tabs.TabPane key={key} closable={closable}>
             {{
               tab: () => <TabContent tabItem={item} />,
             }}
+import { toRaw } from 'vue';
+import router from '/@/router';
+import { AppRouteRecordRaw } from '/@/router/types';
+import { TabItem, tabStore } from '/@/store/modules/tab';
+
+export function initAffixTabs() {
+  /**
+   * @description: Filter all fixed routes
+   */
+  function filterAffixTabs(routes: AppRouteRecordRaw[]) {
+    const tabs: TabItem[] = [];
+    routes &&
+      routes.forEach((route) => {
+        if (route.meta && route.meta.affix) {
+          tabs.push(toRaw(route) as TabItem);
+        }
+      });
+    return tabs;
+  }
+
+  /**
+   * @description: Set fixed tabs
+   */
+  function addAffixTabs(): void {
+    const affixTabs = filterAffixTabs((router.getRoutes() as unknown) as AppRouteRecordRaw[]);
+    for (const tab of affixTabs) {
+      tabStore.commitAddTab(tab);
+    }
+  }
+  let isAddAffix = false;
+  if (!isAddAffix) {
+    addAffixTabs();
+    isAddAffix = true;
+  }
+}
@@ -203,6 +203,7 @@ export function closeTab(closedTab: TabItem | AppRouteRecordRaw) {
   const getTabsState = computed(() => {
     return tabStore.getTabsState;
   });
+
   const { path } = unref(currentRoute);
   if (path !== closedTab.path) {
     // 关闭的不是激活tab
@@ -14,9 +14,9 @@ import { AxiosCanceler } from &#39;/@/utils/http/axios/axiosCancel&#39;;
 import { tabStore } from '/@/store/modules/tab';
+const { closeMessageOnSwitch, removeAllHttpPending } = useProjectSetting();
 const globSetting = useGlobSetting();
 export function createGuard(router: Router) {
-  const { closeMessageOnSwitch, removeAllHttpPending } = useProjectSetting();
   let axiosCanceler: AxiosCanceler | null;
   if (removeAllHttpPending) {
     axiosCanceler = new AxiosCanceler();
 import type { ProjectConfig } from '/@/types/config';
 import { MenuTypeEnum, MenuModeEnum, TriggerEnum } from '/@/enums/menuEnum';
+import { CacheTypeEnum } from '/@/enums/cacheEnum';
 import { ContentEnum, PermissionModeEnum, ThemeEnum, RouterTransitionEnum } from '/@/enums/appEnum';
 import { primaryColor } from '../../build/config/lessModifyVars';
 import { isProdMode } from '/@/utils/env';
@@ -13,6 +14,9 @@ const setting: ProjectConfig = {
   // Permission mode
   permissionMode: PermissionModeEnum.ROLE,
+  // Permission-related cache is stored in sessionStorage or localStorage
+  permissionCacheType: CacheTypeEnum.LOCAL,
+
   // color
   // TODO Theme color
   themeColor: primaryColor,
@@ -130,7 +134,7 @@ const setting: ProjectConfig = {
     openPageLoading: true,
     // Whether to open the top progress bar
-    openNProgress: true,
+    openNProgress: false,
   },
   // Whether to enable KeepAlive cache is best to close during development, otherwise the cache needs to be cleared every time
@@ -20,6 +20,7 @@ import {
 } from '/@/setup/theme';
 import { appStore } from '/@/store/modules/app';
+import { deepMerge } from '../utils/index';
 // Used to share global app instances
 let app: App;
@@ -50,16 +51,15 @@ export function useThemeMode(mode: ThemeModeEnum) {
 // Initial project configuration
 export function initAppConfigStore() {
   let projCfg: ProjectConfig = getLocal(PROJ_CFG_KEY) as ProjectConfig;
-  if (!projCfg) {
-    projCfg = projectSetting;
-  }
-  const {
-    colorWeak,
-    grayMode,
-    headerSetting: { bgColor: headerBgColor },
-    menuSetting: { bgColor },
-  } = projCfg;
+  projCfg = deepMerge(projectSetting, projCfg || {});
+
   try {
+    const {
+      colorWeak,
+      grayMode,
+      headerSetting: { bgColor: headerBgColor } = {},
+      menuSetting: { bgColor } = {},
+    } = projCfg;
     // if (
     //   themeColor !== primaryColor &&
     //   themeColor &&
@@ -26,7 +26,7 @@ export interface LockInfo {
   isLock: boolean;
 }
-let timeId: ReturnType<typeof setTimeout>;
+let timeId: TimeoutHandle;
 const NAME = 'app';
 hotModuleUnregisterModule(NAME);
 @Module({ dynamic: true, namespaced: true, store, name: NAME })
@@ -11,7 +11,7 @@ import { hotModuleUnregisterModule } from &#39;/@/utils/helper/vuexHelper&#39;;
 import { PageEnum } from '/@/enums/pageEnum';
 import { RoleEnum } from '/@/enums/roleEnum';
-import { ROLES_KEY, TOKEN_KEY, USER_INFO_KEY } from '/@/enums/cacheEnum';
+import { CacheTypeEnum, ROLES_KEY, TOKEN_KEY, USER_INFO_KEY } from '/@/enums/cacheEnum';
 import { useMessage } from '/@/hooks/web/useMessage';
@@ -19,13 +19,29 @@ import router from &#39;/@/router&#39;;
 import { loginApi, getUserInfoById } from '/@/api/sys/user';
-import { setLocal, getLocal } from '/@/utils/helper/persistent';
-// import { FULL_PAGE_NOT_FOUND_ROUTE } from '/@/router/constant';
+import { setLocal, getLocal, getSession, setSession } from '/@/utils/helper/persistent';
+import { useProjectSetting } from '/@/hooks/setting';
 export type UserInfo = Omit<GetUserInfoByUserIdModel, 'roles'>;
 const NAME = 'user';
 hotModuleUnregisterModule(NAME);
+
+const { permissionCacheType } = useProjectSetting();
+
+function getCache<T>(key: string) {
+  const fn = permissionCacheType === CacheTypeEnum.LOCAL ? getLocal : getSession;
+  return fn(key) as T;
+}
+
+function setCache(USER_INFO_KEY: string, info: any) {
+  if (!info) return;
+  // const fn = permissionCacheType === CacheTypeEnum.LOCAL ? setLocal : setSession;
+  setLocal(USER_INFO_KEY, info, true);
+  // TODO
+  setSession(USER_INFO_KEY, info, true);
+}
+
 @Module({ namespaced: true, name: NAME, dynamic: true, store })
 class User extends VuexModule {
   // user info
@@ -38,15 +54,15 @@ class User extends VuexModule {
   private roleListState: RoleEnum[] = [];
   get getUserInfoState(): UserInfo {
-    return this.userInfoState || (getLocal(USER_INFO_KEY) as UserInfo) || {};
+    return this.userInfoState || getCache<UserInfo>(USER_INFO_KEY) || {};
   }
   get getTokenState(): string {
-    return this.tokenState || (getLocal(TOKEN_KEY) as string);
+    return this.tokenState || getCache<string>(TOKEN_KEY);
   }
   get getRoleListState(): RoleEnum[] {
-    return this.roleListState.length > 0 ? this.roleListState : (getLocal(ROLES_KEY) as RoleEnum[]);
+    return this.roleListState.length > 0 ? this.roleListState : getCache<RoleEnum[]>(ROLES_KEY);
   }
   @Mutation
@@ -59,25 +75,19 @@ class User extends VuexModule {
   @Mutation
   commitUserInfoState(info: UserInfo): void {
     this.userInfoState = info;
-    if (info) {
-      setLocal(USER_INFO_KEY, info, true);
-    }
+    setCache(USER_INFO_KEY, info);
   }
   @Mutation
   commitRoleListState(roleList: RoleEnum[]): void {
     this.roleListState = roleList;
-    if (roleList) {
-      setLocal(ROLES_KEY, roleList, true);
-    }
+    setCache(ROLES_KEY, roleList);
   }
   @Mutation
   commitTokenState(info: string): void {
     this.tokenState = info;
-    if (info) {
-      setLocal(TOKEN_KEY, info, true);
-    }
+    setCache(TOKEN_KEY, info);
   }
   /**
-// 左侧菜单, 顶部菜单
 import { MenuTypeEnum, MenuModeEnum, TriggerEnum } from '/@/enums/menuEnum';
 import { ContentEnum, PermissionModeEnum, ThemeEnum, RouterTransitionEnum } from '/@/enums/appEnum';
+import { CacheTypeEnum } from '/@/enums/cacheEnum';
 import type { LocaleType } from '/@/locales/types';
 export interface MenuSetting {
@@ -76,6 +76,8 @@ export interface TransitionSetting {
 export interface ProjectConfig {
   locale: LocaleSetting;
+  permissionCacheType: CacheTypeEnum;
+
   // 是否显示配置按钮
   showSettingButton: boolean;
   // 权限模式
@@ -29,8 +29,12 @@ function initCache() {
 initCache();
 export function setLocal(key: string, value: any, immediate = false) {
-  cacheStore.local[BASE_LOCAL_CACHE_KEY] = cacheStore.local[BASE_LOCAL_CACHE_KEY] || {};
+  const local = ls.get(BASE_LOCAL_CACHE_KEY)?.[BASE_LOCAL_CACHE_KEY] || {};
+
+  cacheStore.local[BASE_LOCAL_CACHE_KEY] =
+    { ...local, ...cacheStore.local[BASE_LOCAL_CACHE_KEY] } || {};
   cacheStore.local[BASE_LOCAL_CACHE_KEY][key] = value;
+
   if (immediate) {
     ls.set(BASE_LOCAL_CACHE_KEY, cacheStore.local);
   }
@@ -50,16 +54,21 @@ export function removeLocal(key: string) {
   }
 }
-export function clearLocal() {
+export function clearLocal(immediate = false) {
   cacheStore.local = {};
+  immediate && ls.remove(BASE_LOCAL_CACHE_KEY);
 }
 export function setSession(key: string, value: any, immediate = false) {
-  cacheStore.session[BASE_SESSION_CACHE_KEY] = cacheStore.session[BASE_SESSION_CACHE_KEY] || {};
+  const session = ss.get(BASE_SESSION_CACHE_KEY)?.[BASE_SESSION_CACHE_KEY] || {};
+
+  cacheStore.session[BASE_SESSION_CACHE_KEY] =
+    { ...session, ...cacheStore.session[BASE_SESSION_CACHE_KEY] } || {};
+
   cacheStore.session[BASE_SESSION_CACHE_KEY][key] = value;
+
   if (immediate) {
-    const cache = cacheStore.session;
-    ss.set(BASE_SESSION_CACHE_KEY, cache);
+    ss.set(BASE_SESSION_CACHE_KEY, cacheStore.session);
   }
 }
@@ -77,8 +86,9 @@ export function getSession&lt;T&gt;(key: string): T | null {
   }
 }
-export function clearSession() {
+export function clearSession(immediate = false) {
   cacheStore.session = {};
+  immediate && ss.remove(BASE_SESSION_CACHE_KEY);
 }
 export function clearAll() {
@@ -86,14 +96,17 @@ export function clearAll() {
   clearSession();
 }
+export function persistentCache() {
+  const localCache = cacheStore.local;
+  const sessionCache = cacheStore.session;
+  ls.set(BASE_LOCAL_CACHE_KEY, localCache);
+  ss.set(BASE_SESSION_CACHE_KEY, sessionCache);
+}
+
 (() => {
   // /** Write to local before closing window */
   window.addEventListener('beforeunload', () => {
-    const localCache = cacheStore.local;
-    const sessionCache = cacheStore.session;
-
-    ls.set(BASE_LOCAL_CACHE_KEY, localCache);
-    ss.set(BASE_SESSION_CACHE_KEY, sessionCache);
+    persistentCache();
   });
   function storageChange(e: any) {