如何使用 Pinia 插件来实现状态的加密存储？

要在 Pinia 中实现状态的加密存储，可以结合 Pinia 的插件机制和加密库（如 crypto-js），在状态持久化到本地存储时进行加密，读取时解密。以下是具体实现步骤：

1. 安装依赖

需要安装加密库（用于数据加解密）：

npm install crypto-js --save
# 或
yarn add crypto-js

2. 实现 Pinia 加密存储插件

创建一个自定义 Pinia 插件，实现状态的加密、解密和持久化逻辑：

import CryptoJS from 'crypto-js';

// 加密密钥（实际项目建议从环境变量获取）
const SECRET_KEY = 'your-secret-key-456'; // 建议长度：16/24/32位

// 加密函数
const encrypt = (data) => {
  return CryptoJS.AES.encrypt(JSON.stringify(data), SECRET_KEY).toString();
};

// 解密函数
const decrypt = (ciphertext) => {
  if (!ciphertext) return null;
  const bytes = CryptoJS.AES.decrypt(ciphertext, SECRET_KEY);
  return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
};

// Pinia 加密存储插件
export const encryptedStoragePlugin = ({ store }) => {
  // 1. 初始化时从本地存储读取并解密状态
  const storedState = localStorage.getItem(`encrypted_${store.$id}`);
  if (storedState) {
    try {
      const decryptedState = decrypt(storedState);
      // 恢复状态（避免覆盖未持久化的属性）
      store.$patch(decryptedState);
    } catch (error) {
      console.error('Failed to decrypt state:', error);
      // 解密失败时清除无效数据
      localStorage.removeItem(`encrypted_${store.$id}`);
    }
  }

  // 2. 监听状态变化，加密后保存到本地存储
  store.$subscribe((mutation, state) => {
    // 可自定义需要持久化的字段（例如排除临时数据）
    const stateToPersist = { ...state };
    // 示例：排除不需要持久化的字段
    // delete stateToPersist.tempData;

    localStorage.setItem(
      `encrypted_${store.$id}`,
      encrypt(stateToPersist)
    );
  }, { detached: true }); // detached: true 确保插件在组件卸载后仍能工作
};

3. 在 Pinia 中注册插件

在创建 Pinia 实例时注册加密存储插件，使其作用于所有 store：

import { createPinia } from 'pinia';
import { encryptedStoragePlugin } from './plugins/encryptedStorage';

// 创建 Pinia 实例并注册加密插件
const pinia = createPinia();
pinia.use(encryptedStoragePlugin);

export default pinia;

4. 使用加密存储的 Pinia Store

定义一个普通的 Pinia Store，插件会自动对其状态进行加密存储：

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    info: {
      id: 1,
      name: 'Alice',
      token: 'sensitive-token-456' // 会被加密存储的敏感信息
    },
    tempData: '临时数据（可配置不持久化）'
  }),
  actions: {
    updateUser(newInfo) {
      this.info = { ...this.info, ...newInfo };
    }
  }
});

5. 关键实现说明

• 插件工作流程：

  1. 初始化阶段：插件在 store 创建时，从 localStorage 读取对应 store.$id 的加密数据，解密后通过 $patch 恢复到 store 中。
  2. 状态变更阶段：通过 store.$subscribe 监听状态变化，触发时将当前状态加密后保存到 localStorage，键名为 encrypted_${store.$id}（避免多 store 冲突）。

• 多 store 支持：Pinia 推荐拆分多个独立 store，插件通过 store.$id 区分不同 store 的存储键，确保状态隔离。

• 灵活性：可通过修改 stateToPersist 自定义需要持久化的字段（例如排除临时数据），减少不必要的加密开销。

6. 安全性增强建议

1. 密钥管理：
   密钥 SECRET_KEY 不应硬编码，建议通过后端接口动态获取或存储在环境变量（如 .env）中，降低泄露风险。

2. 加密算法：
   示例使用 AES 对称加密，适合前端场景。如需更高安全性，可结合时间戳或随机盐值增强加密强度：

   // 带随机盐值的加密
   const encrypt = (data) => {
        
     const salt = CryptoJS.lib.WordArray.random(16).toString();
     const encrypted = CryptoJS.AES.encrypt(
       JSON.stringify({
         data, salt }),
       SECRET_KEY
     ).toString();
     return `${
          salt}:${
          encrypted}`;
   };
   

3. 数据校验：
   可添加哈希校验防止数据被篡改，类似 Vuex 中的实现方式。

4. 存储位置选择：
   示例使用 localStorage（持久化），如需会话级存储可替换为 sessionStorage。

通过这种方式，Pinia 的状态会以加密形式存储在本地，既保留了状态持久化的便利性，又提升了敏感数据的安全性。