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

要使用 Vuex 插件实现状态的加密存储，可以结合持久化插件（如 vuex-persistedstate）和加密工具（如 crypto-js），在状态持久化到本地存储前进行加密，读取时再解密。以下是具体实现步骤：

1. 安装依赖

需要安装持久化插件和加密库：

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

2. 实现加密存储插件

创建一个自定义插件，结合持久化和加密逻辑：

import { set, get } from 'vuex-persistedstate';
import CryptoJS from 'crypto-js';

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

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

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

// 自定义存储引擎（集成加密解密）
const encryptedStorage = {
  getItem: (key) => {
    const value = localStorage.getItem(key);
    if (!value) return null;
    // 读取时解密
    return decrypt(value);
  },
  setItem: (key, value) => {
    // 存储时加密
    const encryptedValue = encrypt(value);
    localStorage.setItem(key, encryptedValue);
  },
  removeItem: (key) => {
    localStorage.removeItem(key);
  }
};

// 创建加密持久化插件
export const createEncryptedPersistedState = (options = {}) => {
  return set({
    ...options,
    storage: encryptedStorage // 使用自定义加密存储引擎
  });
};

3. 在 Vuex 中使用加密插件

在 store 中引入并应用上述加密插件，实现状态的加密存储：

import Vue from 'vue';
import Vuex from 'vuex';
import { createEncryptedPersistedState } from './plugins/encryptedStorage';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    user: {
      id: 1,
      name: 'John Doe',
      token: 'sensitive-token-123' // 需要加密的敏感信息
    },
    count: 0
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    increment(state) {
      state.count++;
    }
  },
  // 使用加密持久化插件
  plugins: [
    createEncryptedPersistedState({
      key: 'encrypted-vuex-state', // 存储的 key 名称
      // 指定需要加密存储的状态（可选，默认全部）
      reducer: (state) => ({
        user: state.user // 只加密存储 user 信息
      })
    })
  ]
});

export default store;

4. 关键实现说明

• 加密逻辑：使用 crypto-js 的 AES 加密算法，将状态数据序列化为字符串后加密，存储到 localStorage。
• 解密逻辑：读取数据时先解密，再反序列化为原始状态格式，确保 Vuex 能正确恢复状态。
• 自定义存储引擎：通过实现 getItem/setItem/removeItem 方法，替换 vuex-persistedstate 默认的存储行为，嵌入加密解密步骤。

5. 安全性增强建议

1. 密钥管理：
   实际项目中，密钥（SECRET_KEY）不应硬编码在代码中，建议从后端接口或环境变量（如 .env 文件）动态获取，降低泄露风险。

2. 加密算法选择：
   示例使用 AES 算法（对称加密），适合前端场景。若需更高安全性，可结合非对称加密（如 RSA），但会增加复杂度。

3. 敏感数据过滤：
   通过 reducer 配置只加密敏感状态（如用户信息、令牌），非敏感数据（如计数器）可跳过加密，提升性能。

4. 防止篡改：
   可额外添加数据校验（如哈希值），验证存储的数据是否被篡改：

   // 加密时添加哈希
   const encrypt = (data) => {
        
     const hash = CryptoJS.SHA256(JSON.stringify(data) + SECRET_KEY).toString();
     return CryptoJS.AES.encrypt(JSON.stringify({
         data, hash }), SECRET_KEY).toString();
   };
   
   // 解密时验证哈希
   const decrypt = (ciphertext) => {
        
     const bytes = CryptoJS.AES.decrypt(ciphertext, SECRET_KEY);
     const {
         data, hash } = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
     const verifyHash = CryptoJS.SHA256(JSON.stringify(data) + SECRET_KEY).toString();
     if (hash !== verifyHash) throw new Error('数据被篡改');
     return data;
   };
   

通过这种方式，Vuex 状态在本地存储中会以加密形式存在，有效保护敏感数据，同时保持状态持久化的功能。