feat: encrypt the privacy data when it is persisted (#6056)

* 对私密数据持久化时执行加密
* 将锁屏密码合并到accessStore中进行加密

packages/effects/layouts/src/basic/layout.vue

@@ -12,7 +12,7 @@ import {
   updatePreferences,
   usePreferences,
 } from '@vben/preferences';
-import { useLockStore } from '@vben/stores';
+import { useAccessStore } from '@vben/stores';
 import { cloneDeep, mapTree } from '@vben/utils';
 
 import { VbenAdminLayout } from '@vben-core/layout-ui';
@@ -49,7 +49,7 @@ const {
   sidebarCollapsed,
   theme,
 } = usePreferences();
-const lockStore = useLockStore();
+const accessStore = useAccessStore();
 const { refresh } = useRefresh();
 
 const sidebarTheme = computed(() => {
@@ -356,7 +356,7 @@ const headerSlots = computed(() => {
       />
 
       <Transition v-if="preferences.widget.lockScreen" name="slide-up">
-        <slot v-if="lockStore.isLockScreen" name="lock-screen"></slot>
+        <slot v-if="accessStore.isLockScreen" name="lock-screen"></slot>
       </Transition>
 
       <template v-if="preferencesButtonPosition.fixed">

packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue

@@ -3,7 +3,7 @@ import { computed, reactive, ref } from 'vue';
 
 import { LockKeyhole } from '@vben/icons';
 import { $t, useI18n } from '@vben/locales';
-import { storeToRefs, useLockStore } from '@vben/stores';
+import { storeToRefs, useAccessStore } from '@vben/stores';
 
 import { useScrollLock } from '@vben-core/composables';
 import { useVbenForm, z } from '@vben-core/form-ui';
@@ -26,7 +26,7 @@ withDefaults(defineProps<Props>(), {
 defineEmits<{ toLogin: [] }>();
 
 const { locale } = useI18n();
-const lockStore = useLockStore();
+const accessStore = useAccessStore();
 
 const now = useNow();
 const meridiem = useDateFormat(now, 'A');
@@ -35,7 +35,7 @@ const minute = useDateFormat(now, 'mm');
 const date = useDateFormat(now, 'YYYY-MM-DD dddd', { locales: locale.value });
 
 const showUnlockForm = ref(false);
-const { lockScreenPassword } = storeToRefs(lockStore);
+const { lockScreenPassword } = storeToRefs(accessStore);
 
 const [Form, { form, validate }] = useVbenForm(
   reactive({
@@ -66,7 +66,7 @@ async function handleSubmit() {
   const { valid } = await validate();
   if (valid) {
     if (validPass.value) {
-      lockStore.unlockScreen();
+      accessStore.unlockScreen();
     } else {
       form.setFieldError('password', $t('authentication.passwordErrorTip'));
     }

packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue

@@ -9,7 +9,7 @@ import { useHoverToggle } from '@vben/hooks';
 import { LockKeyhole, LogOut } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { preferences, usePreferences } from '@vben/preferences';
-import { useLockStore } from '@vben/stores';
+import { useAccessStore } from '@vben/stores';
 import { isWindowsOs } from '@vben/utils';
 
 import { useVbenModal } from '@vben-core/popup-ui';
@@ -82,7 +82,7 @@ const emit = defineEmits<{ logout: [] }>();
 
 const { globalLockScreenShortcutKey, globalLogoutShortcutKey } =
   usePreferences();
-const lockStore = useLockStore();
+const accessStore = useAccessStore();
 const [LockModal, lockModalApi] = useVbenModal({
   connectedComponent: LockScreenModal,
 });
@@ -133,7 +133,7 @@ function handleOpenLock() {
 
 function handleSubmitLock(lockScreenPassword: string) {
   lockModalApi.close();
-  lockStore.lockScreen(lockScreenPassword);
+  accessStore.lockScreen(lockScreenPassword);
 }
 
 function handleLogout() {

packages/stores/package.json

@@ -25,6 +25,7 @@
     "@vben-core/typings": "workspace:*",
     "pinia": "catalog:",
     "pinia-plugin-persistedstate": "catalog:",
+    "secure-ls": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:"
   }

packages/stores/src/modules/access.ts

@@ -27,6 +27,14 @@ interface AccessState {
    * 是否已经检查过权限
    */
   isAccessChecked: boolean;
+  /**
+   * 是否锁屏状态
+   */
+  isLockScreen: boolean;
+  /**
+   * 锁屏密码
+   */
+  lockScreenPassword?: string;
   /**
    * 登录是否过期
    */
@@ -61,6 +69,10 @@ export const useAccessStore = defineStore('core-access', {
       }
       return findMenu(this.accessMenus, path);
     },
+    lockScreen(password: string) {
+      this.isLockScreen = true;
+      this.lockScreenPassword = password;
+    },
     setAccessCodes(codes: string[]) {
       this.accessCodes = codes;
     },
@@ -82,10 +94,20 @@ export const useAccessStore = defineStore('core-access', {
     setRefreshToken(token: AccessToken) {
       this.refreshToken = token;
     },
+    unlockScreen() {
+      this.isLockScreen = false;
+      this.lockScreenPassword = undefined;
+    },
   },
   persist: {
     // 持久化
-    pick: ['accessToken', 'refreshToken', 'accessCodes'],
+    pick: [
+      'accessToken',
+      'refreshToken',
+      'accessCodes',
+      'isLockScreen',
+      'lockScreenPassword',
+    ],
   },
   state: (): AccessState => ({
     accessCodes: [],
@@ -93,6 +115,8 @@ export const useAccessStore = defineStore('core-access', {
     accessRoutes: [],
     accessToken: null,
     isAccessChecked: false,
+    isLockScreen: false,
+    lockScreenPassword: undefined,
     loginExpired: false,
     refreshToken: null,
   }),

packages/stores/src/modules/index.ts

@@ -1,4 +1,3 @@
 export * from './access';
-export * from './lock';
 export * from './tabbar';
 export * from './user';

packages/stores/src/modules/lock.test.ts

@@ -1,31 +0,0 @@
-import { createPinia, setActivePinia } from 'pinia';
-import { beforeEach, describe, expect, it } from 'vitest';
-
-import { useLockStore } from './lock';
-
-describe('useLockStore', () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-  });
-
-  it('should initialize with correct default state', () => {
-    const store = useLockStore();
-    expect(store.isLockScreen).toBe(false);
-    expect(store.lockScreenPassword).toBeUndefined();
-  });
-
-  it('should lock screen with a password', () => {
-    const store = useLockStore();
-    store.lockScreen('1234');
-    expect(store.isLockScreen).toBe(true);
-    expect(store.lockScreenPassword).toBe('1234');
-  });
-
-  it('should unlock screen and clear password', () => {
-    const store = useLockStore();
-    store.lockScreen('1234');
-    store.unlockScreen();
-    expect(store.isLockScreen).toBe(false);
-    expect(store.lockScreenPassword).toBeUndefined();
-  });
-});

packages/stores/src/modules/lock.ts

@@ -1,33 +0,0 @@
-import { defineStore } from 'pinia';
-
-interface AppState {
-  /**
-   * 是否锁屏状态
-   */
-  isLockScreen: boolean;
-  /**
-   * 锁屏密码
-   */
-  lockScreenPassword?: string;
-}
-
-export const useLockStore = defineStore('core-lock', {
-  actions: {
-    lockScreen(password: string) {
-      this.isLockScreen = true;
-      this.lockScreenPassword = password;
-    },
-
-    unlockScreen() {
-      this.isLockScreen = false;
-      this.lockScreenPassword = undefined;
-    },
-  },
-  persist: {
-    pick: ['isLockScreen', 'lockScreenPassword'],
-  },
-  state: (): AppState => ({
-    isLockScreen: false,
-    lockScreenPassword: undefined,
-  }),
-});

packages/stores/src/setup.ts

@@ -3,6 +3,7 @@ import type { Pinia } from 'pinia';
 import type { App } from 'vue';
 
 import { createPinia } from 'pinia';
+import SecureLS from 'secure-ls';
 
 let pinia: Pinia;
 
@@ -20,11 +21,27 @@ export async function initStores(app: App, options: InitStoreOptions) {
   const { createPersistedState } = await import('pinia-plugin-persistedstate');
   pinia = createPinia();
   const { namespace } = options;
+  const ls = new SecureLS({
+    encodingType: 'aes',
+    encryptionSecret: import.meta.env.VITE_APP_STORE_SECURE_KEY,
+    isCompression: true,
+    // @ts-ignore secure-ls does not have a type definition for this
+    metaKey: `${namespace}-secure-meta`,
+  });
   pinia.use(
     createPersistedState({
       // key $appName-$store.id
       key: (storeKey) => `${namespace}-${storeKey}`,
-      storage: localStorage,
+      storage: import.meta.env.DEV
+        ? localStorage
+        : {
+            getItem(key) {
+              return ls.get(key);
+            },
+            setItem(key, value) {
+              ls.set(key, value);
+            },
+          },
     }),
   );
   app.use(pinia);