feat(utils): 增加本地存储加密及控制

.env

@@ -11,3 +11,4 @@ VITE_HASH_ROUTE = Y
 VITE_AUTH_ROUTE_MODE=dynamic
 # 存储前缀
 VITE_STORAGE_PREFIX = ""
+VITE_STORAGE_ENCRYPT_SECRET = '__CryptoJS_Secret__'

.env.development

@@ -1 +1,3 @@
 VITE_HTTP_PROXY=N
+# 开启localStorage内容加密
+VITE_STORAGE_ENCRYPT=N

.env.production

@@ -6,3 +6,6 @@ VITE_COMPRESS_TYPE=gzip
 
 # 是否开启打包依赖分析
 VITE_VISUALIZER=N
+
+# 开启localStorage内容加密
+VITE_STORAGE_ENCRYPT=Y

package.json

@@ -31,11 +31,13 @@
 		"./src/**/*.{vue,js,jsx,ts,tsx,json}": "eslint --fix"
 	},
 	"dependencies": {
+		"@types/crypto-js": "^4.1.1",
 		"@types/qs": "^6.9.7",
 		"@vueuse/core": "^9.10.0",
 		"@wangeditor/editor": "^5.1.23",
 		"@wangeditor/editor-for-vue": "^5.1.12",
 		"axios": "^1.2.2",
+		"crypto-js": "^4.1.1",
 		"echarts": "^5.4.1",
 		"md-editor-v3": "^2.7.2",
 		"pinia": "^2.0.28",

src/typings/env.d.ts

@@ -31,17 +31,18 @@ interface ImportMetaEnv {
 	/** 是否开启打包压缩 */
 	readonly VITE_COMPRESS_OPEN?: 'Y' | 'N';
 	/** 压缩算法类型 */
-	readonly VITE_COMPRESS_TYPE?:
-		| 'gzip'
-		| 'brotliCompress'
-		| 'deflate'
-		| 'deflateRaw';
+	readonly VITE_COMPRESS_TYPE?: 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw';
 	/** hash路由模式 */
 	readonly VITE_HASH_ROUTE?: 'Y' | 'N';
 	/** 路由加载模式 */
 	readonly VITE_AUTH_ROUTE_MODE?: 'static' | 'dynamic';
 	/** 本地存储前缀 */
 	readonly VITE_STORAGE_PREFIX?: string;
+	/** 本地存储内容开启加密 */
+	readonly VITE_STORAGE_ENCRYPT?: 'Y' | 'N';
+	/** 本地存储加密密钥 */
+	readonly VITE_STORAGE_ENCRYPT_SECRET: string;
+
 	/** 后端服务的环境类型 */
 	readonly VITE_SERVICE_ENV?: ServiceEnvType;
 }

src/utils/crypto.ts

@@ -0,0 +1,41 @@
+import CryptoJS from 'crypto-js';
+import { isObject } from './is';
+
+const { VITE_STORAGE_ENCRYPT, VITE_STORAGE_ENCRYPT_SECRET } = import.meta.env;
+
+/**
+ * 加密数据
+ * @param data - 数据
+ */
+export function encrypto(data: any) {
+	let newData = data;
+
+	if (isObject(data)) {
+		newData = JSON.stringify(data);
+	}
+
+	if (VITE_STORAGE_ENCRYPT === 'N') {
+		return newData;
+	}
+
+	return CryptoJS.AES.encrypt(newData, VITE_STORAGE_ENCRYPT_SECRET).toString();
+}
+
+/**
+ * 解密数据
+ * @param cipherText - 密文
+ */
+export function decrypto(cipherText: string) {
+	if (VITE_STORAGE_ENCRYPT === 'N') {
+		return JSON.parse(cipherText);
+	}
+
+	const bytes = CryptoJS.AES.decrypt(cipherText, VITE_STORAGE_ENCRYPT_SECRET);
+	const originalText = bytes.toString(CryptoJS.enc.Utf8);
+
+	if (originalText) {
+		return JSON.parse(originalText);
+	}
+
+	return null;
+}

src/utils/storage.ts

@@ -1,3 +1,4 @@
+import { encrypto, decrypto } from './crypto';
 // 读取缓存前缀
 const prefix = import.meta.env.VITE_STORAGE_PREFIX as string;
 
@@ -17,7 +18,7 @@ function createLocalStorage() {
 			value,
 			expire: new Date().getTime() + expire * 1000,
 		};
-		const json = JSON.stringify(storageData);
+		const json = encrypto(storageData);
 		window.localStorage.setItem(prefix + key, json);
 	}
 
@@ -26,7 +27,11 @@ function createLocalStorage() {
 		if (!json) return null;
 
 		let storageData: StorageData | null = null;
-		storageData = JSON.parse(json as string);
+		try {
+			storageData = decrypto(json);
+		} catch {
+			// 防止解析失败
+		}
 
 		if (storageData) {
 			const { value, expire } = storageData;
@@ -34,7 +39,7 @@ function createLocalStorage() {
 				return value;
 			}
 		}
-		local.remove(key);
+		remove(key);
 		return null;
 	}
 
@@ -58,20 +63,24 @@ function createLocalStorage() {
 
 function createSessionStorage() {
 	function set(key: string, value: any) {
-		const json = JSON.stringify(value);
+		const json = encrypto(value);
 		window.sessionStorage.setItem(prefix + key, json);
 	}
 	function get<T>(key: string) {
 		const json = sessionStorage.getItem(prefix + key);
-		let data: T | null = null;
-		if (json) {
+		if (!json) return null;
+
+		let storageData;
 		try {
-				data = JSON.parse(json);
+			storageData = decrypto(json);
 		} catch {
 			// 防止解析失败
 		}
+
+		if (storageData) {
+			return storageData;
 		}
-		return data;
+		return null;
 	}
 	function remove(key: string) {
 		window.sessionStorage.removeItem(prefix + key);
@@ -79,6 +88,13 @@ function createSessionStorage() {
 	function clear() {
 		window.sessionStorage.clear();
 	}
+
+	return {
+		set,
+		get,
+		remove,
+		clear,
+	};
 }
 
 export const local = createLocalStorage();

src/views/login/index.vue

@@ -35,6 +35,7 @@
         <n-form-item path="account">
           <n-input
             v-model:value="formValue.account"
+            clearable
             placeholder="输入账号"
           >
             <template #prefix>
@@ -47,6 +48,7 @@
             v-model:value="formValue.pwd"
             type="password"
             placeholder="输入密码"
+            clearable
             show-password-on="click"
           >
             <template #prefix>
@@ -64,7 +66,9 @@
           <n-space align="center">
             <n-input
               v-model:value="formValue.code"
+              clearable
               placeholder="输入验证码"
+              :maxlength="4"
             >
               <template #prefix>
                 <i-icon-park-outline-message />
@@ -155,6 +159,8 @@ function handleLogin() {
 
 		if (isRemember.value) {
 			local.set('login_account', { account, pwd });
+		} else {
+			local.remove('login_account');
 		}
 
 		authStore.login(account, pwd);