在 Pinia 中如何使用加密插件？

在 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));
    };
  };
};

使用步骤说明：

1. 在主应用中注册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 };
  }
};

1. 关键特性：
   • 状态变化时自动加密存储
   • 支持 localStorage 和 sessionStorage 切换
   • 提供手动保存方法 $encryptSave()
   • 包含解密错误处理

安全建议：

• 生产环境中，密钥不要硬编码在代码中，应通过后端接口动态获取
• 可以定期更新加密密钥，提高安全性
• 对于特别敏感的信息，建议不要存储在客户端本地

通过这种方式，Pinia的状态会在本地存储时自动加密，读取时自动解密，有效保护敏感数据。