refactor(projects): new storage system [新的本地数据存储系统]

src/components/common/AppLoading.vue

@@ -16,9 +16,8 @@
 </template>
 
 <script setup lang="ts">
-import { EnumStorageKey } from '@/enum';
 import { useAppInfo } from '@/composables';
-import { getLocal } from '@/utils';
+import { localStg } from '@/utils';
 
 const { title } = useAppInfo();
 
@@ -31,7 +30,7 @@ const lodingClasses = [
 
 function addThemeColorCssVars() {
   const defaultColor = '#1890ff';
-  const themeColor = getLocal(EnumStorageKey['theme-color']) || defaultColor;
+  const themeColor = localStg.get('themeColor') || defaultColor;
   const cssVars = `--primary-color: ${themeColor}`;
   document.documentElement.style.cssText = cssVars;
 }

src/enum/common.ts

@@ -5,22 +5,6 @@ export enum EnumContentType {
   formData = 'multipart/form-data'
 }
 
-/** 缓存的key */
-export enum EnumStorageKey {
-  /** 主题颜色 */
-  'theme-color' = '__THEME_COLOR__',
-  /** 用户token */
-  'token' = '__TOKEN__',
-  /** 用户刷新token */
-  'refresh-token' = '__REFRESH_TOKEN__',
-  /** 用户信息 */
-  'user-info' = '__USER_INFO__',
-  /** 主题配置 */
-  'theme-settings' = '__THEME_SETTINGS__',
-  /** 多页签路由信息 */
-  'multi-tab-routes' = '__MULTI_TAB_ROUTES__'
-}
-
 /** 数据类型 */
 export enum EnumDataType {
   number = '[object Number]',

src/router/guard/dynamic.ts

@@ -1,7 +1,7 @@
 import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router';
 import { routeName } from '@/router';
 import { useRouteStore } from '@/store';
-import { getToken } from '@/utils';
+import { localStg } from '@/utils';
 
 /**
  * 动态路由
@@ -12,7 +12,7 @@ export async function createDynamicRouteGuard(
   next: NavigationGuardNext
 ) {
   const route = useRouteStore();
-  const isLogin = Boolean(getToken());
+  const isLogin = Boolean(localStg.get('token'));
 
   // 初始化权限路由
   if (!route.isInitAuthRoute) {

src/router/guard/permission.ts

@@ -1,7 +1,7 @@
 import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router';
 import { routeName } from '@/router';
 import { useAuthStore } from '@/store';
-import { exeStrategyActions, getToken } from '@/utils';
+import { exeStrategyActions, localStg } from '@/utils';
 import { createDynamicRouteGuard } from './dynamic';
 
 /** 处理路由页面的权限 */
@@ -22,7 +22,7 @@ export async function createPermissionGuard(
   }
 
   const auth = useAuthStore();
-  const isLogin = Boolean(getToken());
+  const isLogin = Boolean(localStg.get('token'));
   const permissions = to.meta.permissions || [];
   const needLogin = Boolean(to.meta?.requiresAuth) || Boolean(permissions.length);
   const hasPermission = !permissions.length || permissions.includes(auth.userInfo.userRole);

src/service/request/helpers.ts

@@ -1,6 +1,6 @@
 import type { AxiosRequestConfig } from 'axios';
 import { useAuthStore } from '@/store';
-import { getRefreshToken, setRefreshToken, setToken } from '@/utils';
+import { localStg } from '@/utils';
 import { fetchUpdateToken } from '../api';
 
 /**
@@ -9,11 +9,12 @@ import { fetchUpdateToken } from '../api';
  */
 export async function handleRefreshToken(axiosConfig: AxiosRequestConfig) {
   const { resetAuthStore } = useAuthStore();
-  const refreshToken = getRefreshToken();
+  const refreshToken = localStg.get('refreshToken') || '';
   const { data } = await fetchUpdateToken(refreshToken);
   if (data) {
-    setToken(data.token);
-    setRefreshToken(data.refreshToken);
+    localStg.set('token', data.token);
+    localStg.set('refreshToken', data.refreshToken);
+
     const config = { ...axiosConfig };
     if (config.headers) {
       config.headers.Authorization = data.token;

src/service/request/instance.ts

@@ -2,7 +2,7 @@ import axios from 'axios';
 import type { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios';
 import { REFRESH_TOKEN_CODE } from '@/config';
 import {
-  getToken,
+  localStg,
   handleAxiosError,
   handleBackendError,
   handleResponseError,
@@ -49,7 +49,7 @@ export default class CustomAxiosInstance {
           const contentType = handleConfig.headers['Content-Type'] as string;
           handleConfig.data = await transformRequestData(handleConfig.data, contentType);
           // 设置token
-          handleConfig.headers.Authorization = getToken();
+          handleConfig.headers.Authorization = localStg.get('token') || '';
         }
         return handleConfig;
       },

src/store/modules/auth/helpers.ts

@@ -0,0 +1,25 @@
+import { localStg } from '@/utils';
+
+/** 获取token */
+export function getToken() {
+  return localStg.get('token') || '';
+}
+
+/** 获取用户信息 */
+export function getUserInfo() {
+  const emptyInfo: Auth.UserInfo = {
+    userId: '',
+    userName: '',
+    userRole: 'user'
+  };
+  const userInfo: Auth.UserInfo = localStg.get('userInfo') || emptyInfo;
+
+  return userInfo;
+}
+
+/** 去除用户相关缓存 */
+export function clearAuthStorage() {
+  localStg.remove('token');
+  localStg.remove('refreshToken');
+  localStg.remove('userInfo');
+}

src/store/modules/auth/index.ts

@@ -3,9 +3,10 @@ import { defineStore } from 'pinia';
 import { router } from '@/router';
 import { fetchLogin, fetchUserInfo } from '@/service';
 import { useRouterPush } from '@/composables';
-import { clearAuthStorage, getToken, getUserInfo, setRefreshToken, setToken, setUserInfo } from '@/utils';
+import { localStg } from '@/utils';
 import { useTabStore } from '../tab';
 import { useRouteStore } from '../route';
+import { getToken, getUserInfo, clearAuthStorage } from './helpers';
 
 interface AuthState {
   /** 用户信息 */
@@ -81,14 +82,14 @@ export const useAuthStore = defineStore('auth-store', {
 
       // 先把token存储到缓存中(后面接口的请求头需要token)
       const { token, refreshToken } = backendToken;
-      setToken(token);
-      setRefreshToken(refreshToken);
+      localStg.set('token', token);
+      localStg.set('refreshToken', refreshToken);
 
       // 获取用户信息
       const { data } = await fetchUserInfo();
       if (data) {
         // 成功后把用户信息存储到缓存中
-        setUserInfo(data);
+        localStg.set('userInfo', data);
 
         // 更新状态
         this.userInfo = data;

src/store/modules/route/index.ts

@@ -2,10 +2,10 @@ import { defineStore } from 'pinia';
 import { ROOT_ROUTE, constantRoutes, router, routes as staticRoutes } from '@/router';
 import { fetchUserRoutes } from '@/service';
 import {
+  localStg,
   filterAuthRoutesByUserPermission,
   getCacheRoutes,
   getConstantRouteNames,
-  getUserInfo,
   transformAuthRouteToVueRoutes,
   transformAuthRouteToVueRoute,
   transformAuthRouteToMenu,
@@ -106,7 +106,12 @@ export const useRouteStore = defineStore('route-store', {
     },
     /** 初始化动态路由 */
     async initDynamicRoute() {
-      const { userId } = getUserInfo();
+      const { userId } = localStg.get('userInfo') || {};
+
+      if (!userId) {
+        throw new Error('userId 不能为空!');
+      }
+
       const { data } = await fetchUserRoutes(userId);
       if (data) {
         this.routeHomeName = data.home;
@@ -123,9 +128,6 @@ export const useRouteStore = defineStore('route-store', {
     /** 初始化权限路由 */
     async initAuthRoute() {
       const { initHomeTab } = useTabStore();
-      const { userId } = getUserInfo();
-
-      if (!userId) return;
 
       const isDynamicRoute = this.authRouteMode === 'dynamic';
       if (isDynamicRoute) {

src/store/modules/tab/helpers.ts

@@ -1,6 +1,5 @@
 import type { RouteLocationNormalizedLoaded, RouteRecordNormalized } from 'vue-router';
-import { EnumStorageKey } from '@/enum';
-import { getLocal, setLocal } from '@/utils';
+import { localStg } from '@/utils';
 
 /**
  * 根据vue路由获取tab路由
@@ -58,15 +57,10 @@ function hasFullPath(
   return Boolean((route as RouteLocationNormalizedLoaded).fullPath);
 }
 
-/** 缓存多页签数据 */
-export function setTabRoutes(data: App.GlobalTabRoute[]) {
-  setLocal(EnumStorageKey['multi-tab-routes'], data);
-}
-
 /** 获取缓存的多页签数据 */
 export function getTabRoutes() {
   const routes: App.GlobalTabRoute[] = [];
-  const data = getLocal<App.GlobalTabRoute[]>(EnumStorageKey['multi-tab-routes']);
+  const data = localStg.get('multiTabRoutes');
   if (data) {
     const defaultTabRoutes = data.map(item => ({
       ...item,
@@ -82,5 +76,5 @@ export function getTabRoutes() {
 
 /** 清空多页签数据 */
 export function clearTabRoutes() {
-  setTabRoutes([]);
+  localStg.set('multiTabRoutes', []);
 }

src/store/modules/tab/index.ts

@@ -1,6 +1,7 @@
 import type { RouteLocationNormalizedLoaded, Router } from 'vue-router';
 import { defineStore } from 'pinia';
 import { useRouterPush } from '@/composables';
+import { localStg } from '@/utils';
 import { useThemeStore } from '../theme';
 import {
   clearTabRoutes,
@@ -8,8 +9,7 @@ import {
   getIndexInTabRoutesByRouteName,
   getTabRouteByVueRoute,
   getTabRoutes,
-  isInTabRoutes,
-  setTabRoutes
+  isInTabRoutes
 } from './helpers';
 
 interface TabState {
@@ -52,7 +52,7 @@ export const useTabStore = defineStore('tab-store', {
     },
     /** 缓存页签路由数据 */
     cacheTabRoutes() {
-      setTabRoutes(this.tabs);
+      localStg.set('multiTabRoutes', this.tabs);
     },
     /**
      * 设置当前路由对应的页签为激活状态

src/store/modules/theme/helpers.ts

@@ -1,19 +1,18 @@
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { cloneDeep } from 'lodash-es';
 import { themeSetting } from '@/settings';
-import { EnumStorageKey } from '@/enum';
-import { addColorAlpha, getColorPalette, getLocal, getThemeColor, removeLocal, setLocal } from '@/utils';
+import { localStg, addColorAlpha, getColorPalette } from '@/utils';
 
 /** 初始化主题配置 */
 export function initThemeSettings() {
   const isProd = import.meta.env.PROD;
   // 生产环境才缓存主题配置，本地开发实时调整配置更改配置的json
-  const storageSettings = getThemeSettings();
+  const storageSettings = localStg.get('themeSettings');
   if (isProd && storageSettings) {
     return storageSettings;
   }
 
-  const themeColor = getThemeColor() || themeSetting.themeColor;
+  const themeColor = localStg.get('themeColor') || themeSetting.themeColor;
   const info = themeSetting.isCustomizeInfoColor ? themeSetting.otherColor.info : getColorPalette(themeColor, 7);
   const otherColor = { ...themeSetting.otherColor, info };
   const setting = cloneDeep({ ...themeSetting, themeColor, otherColor });
@@ -78,18 +77,3 @@ export function getNaiveThemeOverrides(colors: Record<ColorType, string>): Globa
     }
   };
 }
-
-/** 获取缓存中的主题配置 */
-function getThemeSettings() {
-  return getLocal<Theme.Setting>(EnumStorageKey['theme-settings']);
-}
-
-/** 获取缓存中的主题配置 */
-export function setThemeSettings(settings: Theme.Setting) {
-  return setLocal(EnumStorageKey['theme-settings'], settings);
-}
-
-/** 清除缓存配置 */
-export function clearThemeSettings() {
-  removeLocal(EnumStorageKey['theme-settings']);
-}

src/store/modules/theme/index.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { darkTheme } from 'naive-ui';
-import { clearThemeSettings, getNaiveThemeOverrides, initThemeSettings, setThemeSettings } from './helpers';
+import { localStg } from '@/utils';
+import { getNaiveThemeOverrides, initThemeSettings } from './helpers';
 
 type ThemeState = Theme.Setting;
 
@@ -24,14 +25,14 @@ export const useThemeStore = defineStore('theme-store', {
   actions: {
     /** 重置theme状态 */
     resetThemeStore() {
-      clearThemeSettings();
+      localStg.remove('themeSettings');
       this.$reset();
     },
     /** 缓存主题配置 */
     cacheThemeSettings() {
       const isProd = import.meta.env.PROD;
       if (isProd) {
-        setThemeSettings(this.$state);
+        localStg.set('themeSettings', this.$state);
       }
     },
     /** 设置暗黑模式 */

src/store/subscribe/theme.ts

@@ -3,7 +3,7 @@ import { useOsTheme } from 'naive-ui';
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { useElementSize } from '@vueuse/core';
 import { kebabCase } from 'lodash-es';
-import { setThemeColor } from '@/utils';
+import { localStg } from '@/utils';
 import { useThemeStore } from '../modules';
 
 /** 订阅theme store */
@@ -17,7 +17,7 @@ export default function subscribeThemeStore() {
   const stopThemeColor = watch(
     () => theme.themeColor,
     newValue => {
-      setThemeColor(newValue);
+      localStg.set('themeColor', newValue);
     },
     { immediate: true }
   );

src/typings/storage.d.ts

@@ -0,0 +1,22 @@
+declare namespace StorageInterface {
+  /** localStorage的存储数据的类型 */
+  interface Session {
+    demoKey: string;
+  }
+
+  /** localStorage的存储数据的类型 */
+  interface Local {
+    /** 主题颜色 */
+    themeColor: string;
+    /** 用户token */
+    token: string;
+    /** 用户刷新token */
+    refreshToken: string;
+    /** 用户信息 */
+    userInfo: Auth.UserInfo;
+    /** 主题配置 */
+    themeSettings: Theme.Setting;
+    /** 多页签路由信息 */
+    multiTabRoutes: App.GlobalTabRoute[];
+  }
+}

src/utils/auth/index.ts

@@ -1 +0,0 @@
-export * from './user';

src/utils/auth/user.ts

@@ -1,60 +0,0 @@
-import { EnumStorageKey } from '@/enum';
-import { getLocal, removeLocal, setLocal } from '../storage';
-
-/** 设置token */
-export function setToken(token: string) {
-  setLocal(EnumStorageKey.token, token);
-}
-
-/** 获取token */
-export function getToken() {
-  return getLocal<string>(EnumStorageKey.token) || '';
-}
-
-/** 去除token */
-export function removeToken() {
-  removeLocal(EnumStorageKey.token);
-}
-
-/** 获取refresh token */
-export function getRefreshToken() {
-  return getLocal<string>(EnumStorageKey['refresh-token']) || '';
-}
-
-/** 设置refresh token */
-export function setRefreshToken(token: string) {
-  setLocal(EnumStorageKey['refresh-token'], token);
-}
-
-/** 去除refresh token */
-export function removeRefreshToken() {
-  removeLocal(EnumStorageKey['refresh-token']);
-}
-
-/** 获取用户信息 */
-export function getUserInfo() {
-  const emptyInfo: Auth.UserInfo = {
-    userId: '',
-    userName: '',
-    userRole: 'user'
-  };
-  const userInfo: Auth.UserInfo = getLocal<Auth.UserInfo>(EnumStorageKey['user-info']) || emptyInfo;
-  return userInfo;
-}
-
-/** 设置用户信息 */
-export function setUserInfo(userInfo: Auth.UserInfo) {
-  setLocal(EnumStorageKey['user-info'], userInfo);
-}
-
-/** 去除用户信息 */
-export function removeUserInfo() {
-  removeLocal(EnumStorageKey['user-info']);
-}
-
-/** 去除用户相关缓存 */
-export function clearAuthStorage() {
-  removeToken();
-  removeRefreshToken();
-  removeUserInfo();
-}

src/utils/common/index.ts

@@ -1,6 +1,4 @@
 export * from './typeof';
 export * from './color';
 export * from './number';
-export * from './object';
 export * from './pattern';
-export * from './theme';

src/utils/common/object.ts

@@ -1,4 +0,0 @@
-/** 设置对象数据 */
-export function objectAssign<T extends Record<string, any>>(target: T, source: Partial<T>) {
-  Object.assign(target, source);
-}

src/utils/common/theme.ts

@@ -1,16 +0,0 @@
-import { EnumStorageKey } from '@/enum';
-
-/**
- * 缓存主题颜色
- * @param color
- */
-export function setThemeColor(color: string) {
-  window.localStorage.setItem(EnumStorageKey['theme-color'], color);
-}
-
-/**
- * 获取缓存的主题颜色
- */
-export function getThemeColor() {
-  return window.localStorage.getItem(EnumStorageKey['theme-color']);
-}

src/utils/index.ts

@@ -1,6 +1,5 @@
 export * from './common';
 export * from './storage';
 export * from './service';
-export * from './auth';
 export * from './router';
 export * from './form';

src/utils/storage/local.ts

@@ -1,23 +1,26 @@
 import { decrypto, encrypto } from '../crypto';
-
-interface StorageData {
-  value: unknown;
+interface StorageData<T> {
+  value: T;
   expire: number | null;
 }
 
-/** 默认缓存期限为7天 */
-const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
+function createLocalStorage<T extends StorageInterface.Local = StorageInterface.Local>() {
+  /** 默认缓存期限为7天 */
+  const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
 
-export function setLocal(key: string, value: unknown, expire: number | null = DEFAULT_CACHE_TIME) {
-  const storageData: StorageData = { value, expire: expire !== null ? new Date().getTime() + expire * 1000 : null };
+  function set<K extends keyof T>(key: K, value: T[K], expire: number | null = DEFAULT_CACHE_TIME) {
+    const storageData: StorageData<T[K]> = {
+      value,
+      expire: expire !== null ? new Date().getTime() + expire * 1000 : null
+    };
     const json = encrypto(storageData);
-  window.localStorage.setItem(key, json);
-}
+    window.localStorage.setItem(key as string, json);
+  }
 
-export function getLocal<T>(key: string) {
-  const json = window.localStorage.getItem(key);
+  function get<K extends keyof T>(key: K) {
+    const json = window.localStorage.getItem(key as string);
     if (json) {
-    let storageData: StorageData | null = null;
+      let storageData: StorageData<T[K]> | null = null;
       try {
         storageData = decrypto(json);
       } catch {
@@ -27,19 +30,28 @@ export function getLocal<T>(key: string) {
         const { value, expire } = storageData;
         // 在有效期内直接返回
         if (expire === null || expire >= Date.now()) {
-        return value as T;
+          return value as T[K];
         }
       }
-    removeLocal(key);
+      remove(key);
       return null;
     }
     return null;
-}
+  }
 
-export function removeLocal(key: string) {
-  window.localStorage.removeItem(key);
-}
-
-export function clearLocal() {
+  function remove(key: keyof T) {
+    window.localStorage.removeItem(key as string);
+  }
+  function clear() {
     window.localStorage.clear();
+  }
+
+  return {
+    set,
+    get,
+    remove,
+    clear
+  };
 }
+
+export const localStg = createLocalStorage();

src/utils/storage/session.ts

@@ -25,3 +25,37 @@ export function removeSession(key: string) {
 export function clearSession() {
   window.sessionStorage.clear();
 }
+
+function createSessionStorage<T extends StorageInterface.Session = StorageInterface.Session>() {
+  function set<K extends keyof T>(key: K, value: T[K]) {
+    const json = encrypto(value);
+    sessionStorage.setItem(key as string, json);
+  }
+  function get<K extends keyof T>(key: K) {
+    const json = sessionStorage.getItem(key as string);
+    let data: T[K] | null = null;
+    if (json) {
+      try {
+        data = decrypto(json);
+      } catch {
+        // 防止解析失败
+      }
+    }
+    return data;
+  }
+  function remove(key: keyof T) {
+    window.sessionStorage.removeItem(key as string);
+  }
+  function clear() {
+    window.sessionStorage.clear();
+  }
+
+  return {
+    set,
+    get,
+    remove,
+    clear
+  };
+}
+
+export const sessionStg = createSessionStorage();