feat: encrypt sensitive store data in localStorage

* 对存储在localStorage中的敏感数据进行加密

Author: mynetfan

apps/web-antd/.env

@@ -3,3 +3,6 @@ VITE_APP_TITLE=Vben Admin Antd
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
 VITE_APP_NAMESPACE=vben-web-antd
+
+# 缓存密钥，用于加解密储存于localStorage中的访问令牌、锁屏密码等数据
+VITE_STORAGE_CRYPTO_KEY=vben-storage-crypto-key

apps/web-ele/.env

@@ -3,3 +3,6 @@ VITE_APP_TITLE=Vben Admin Ele
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
 VITE_APP_NAMESPACE=vben-web-ele
+
+# 缓存密钥，用于加解密储存于localStorage中的访问令牌、锁屏密码等数据
+VITE_STORAGE_CRYPTO_KEY=vben-storage-crypto-key

apps/web-naive/.env

@@ -3,3 +3,6 @@ VITE_APP_TITLE=Vben Admin Naive
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
 VITE_APP_NAMESPACE=vben-web-naive
+
+# 缓存密钥，用于加解密储存于localStorage中的访问令牌、锁屏密码等数据
+VITE_STORAGE_CRYPTO_KEY=vben-storage-crypto-key

packages/@core/base/shared/src/utils/crypto.ts

@@ -0,0 +1,58 @@
+export function rc4(key: string, data: string): string {
+  const S: number[] = [];
+  let j: number = 0;
+  const result: number[] = [];
+
+  // 初始化 S 盒
+  for (let i = 0; i < 256; i++) {
+    S[i] = i;
+  }
+
+  // 初始置换
+  for (let i = 0; i < 256; i++) {
+    j =
+      (j + (S[i] as number) + (key.codePointAt(i % key.length) as number)) %
+      256;
+    [S[i] as number, S[j] as number] = [S[j] as number, S[i] as number];
+  }
+
+  let i: number = 0;
+  j = 0;
+  for (let k = 0; k < data.length; k++) {
+    i = (i + 1) % 256;
+    j = (j + (S[i] as number)) % 256;
+    [S[i] as number, S[j] as number] = [S[j] as number, S[i] as number];
+    const t = ((S[i] as number) + (S[j] as number)) % 256;
+    const keystreamByte = S[t] as number;
+    result.push((data.codePointAt(k) as number) ^ keystreamByte);
+  }
+
+  return String.fromCharCode.apply(null, result);
+}
+
+/**
+ * 对数据进行序列化、加密操作
+ * @param data 需要处理的数据
+ * @param key 加密的密钥
+ * @returns
+ */
+export function encrypt(data: any, key: string): string {
+  const result = rc4(key, JSON.stringify(data));
+  return btoa(result);
+}
+
+/**
+ * 对数据进行解密、反序列化操作
+ * @param raw 需要处理的密文
+ * @param key 解密的密钥
+ * @returns
+ */
+export function decrypt(raw: string, key: string): any {
+  try {
+    const decodedData = atob(raw);
+    const decryptedData = rc4(key, decodedData);
+    return JSON.parse(decryptedData);
+  } catch {
+    return undefined;
+  }
+}

packages/@core/base/shared/src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './cn';
+export * from './crypto';
 export * from './date';
 export * from './diff';
 export * from './dom';

packages/stores/src/setup.ts

@@ -2,6 +2,8 @@ import type { Pinia } from 'pinia';
 
 import type { App } from 'vue';
 
+import { decrypt, encrypt } from '@vben-core/shared/utils';
+
 import { createPinia } from 'pinia';
 
 let pinia: Pinia;
@@ -20,11 +22,27 @@ export async function initStores(app: App, options: InitStoreOptions) {
   const { createPersistedState } = await import('pinia-plugin-persistedstate');
   pinia = createPinia();
   const { namespace } = options;
+  const STORAGE_CRYPTO_KEY =
+    import.meta.env.VITE_STORAGE_CRYPTO_KEY || 'vben-admin-crypto';
+  const IS_PROD = import.meta.env.PROD;
   pinia.use(
     createPersistedState({
       // key $appName-$store.id
       key: (storeKey) => `${namespace}-${storeKey}`,
-      storage: localStorage,
+      storage: IS_PROD
+        ? {
+            getItem: (key) => {
+              const value = localStorage.getItem(key);
+              if (value) {
+                return decrypt(value, STORAGE_CRYPTO_KEY);
+              }
+              return null;
+            },
+            setItem: (key, value) => {
+              localStorage.setItem(key, encrypt(value, STORAGE_CRYPTO_KEY));
+            },
+          }
+        : localStorage,
     }),
   );
   app.use(pinia);

playground/.env

@@ -3,3 +3,6 @@ VITE_APP_TITLE=Vben Admin
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
 VITE_APP_NAMESPACE=vben-web-play
+
+# 缓存密钥，用于加解密储存于localStorage中的访问令牌、锁屏密码等数据
+VITE_STORAGE_CRYPTO_KEY=vben-storage-crypto-key