在 Pinia 中使用加密插件主要分为几个步骤：安装依赖、创建加密插件、注册插件并在实际项目中应用。以下是具体实现方法：
首先，确保已安装必要的依赖：
npm install pinia crypto-js
# 或
yarn add pinia crypto-js
接下来，创建完整的加密插件实现：
// piniaEncryptionPlugin.js
import CryptoJS from 'crypto-js';
// 加密密钥（实际项目中建议从后端获取）
const SECRET_KEY = import.meta.env.VITE_ENCRYPTION_KEY || 'your-secret-key';
// 加密函数
const encrypt = (data) => {
return CryptoJS.AES.encrypt(JSON.stringify(data), SECRET_KEY).toString();
};
// 解密函数
const decrypt = (data) => {
try {
const bytes = CryptoJS.AES.decrypt(data, SECRET_KEY);
return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
} catch (error) {
console.error('解密失败:', error);
return null;
}
};
// 创建加密插件
export const createEncryptionPlugin = (options = {}) => {
// 默认使用localStorage，可通过参数改为sessionStorage
const storage = options.storage || localStorage;
return ({ store }) => {
// 从存储中读取并解密数据
const storedData = storage.getItem(`__pinia__${store.$id}`);
if (storedData) {
const decryptedData = decrypt(storedData);
if (decryptedData) {
store.$patch(decryptedData);
}
}
// 监听状态变化，加密后保存
store.$subscribe((mutation, state) => {
storage.setItem(`__pinia__${store.$id}`, encrypt(state));
}, { detached: true });
// 提供手动保存方法
store.$encryptSave = () => {
storage.setItem(`__pinia__${store.$id}`, encrypt(store.$state));
};
};
};
使用步骤说明：
- 在主应用中注册Pinia：
```javascript
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import pinia from './store';
createApp(App)
.use(pinia)
.mount('#app');
2. **在组件中使用Store**：
```javascript
// 组件中使用
import { useUserStore } from '@/store/userStore';
export default {
setup() {
const userStore = useUserStore();
const handleLogin = () => {
userStore.login({
username: 'example',
email: 'example@test.com',
token: 'jwt-token-here'
});
};
return { handleLogin, userStore };
}
};
- 关键特性：
- 状态变化时自动加密存储
- 支持 localStorage 和 sessionStorage 切换
- 提供手动保存方法
$encryptSave() - 包含解密错误处理
安全建议：
- 生产环境中，密钥不要硬编码在代码中，应通过后端接口动态获取
- 可以定期更新加密密钥，提高安全性
- 对于特别敏感的信息，建议不要存储在客户端本地
通过这种方式，Pinia的状态会在本地存储时自动加密，读取时自动解密，有效保护敏感数据。
