深入理解Elf项目中本地存储加密的实现与挑战

2025-07-10 07:22:10作者：伍希望

在Angular应用开发中，状态管理是一个非常重要的环节。Elf作为一个轻量级的状态管理库，提供了简洁的API和强大的功能。其中，@ngneat/elf-persist-state插件允许开发者将状态持久化到本地存储中。本文将深入探讨如何在Elf项目中实现本地存储数据的对称加密，以及在实现过程中遇到的挑战和解决方案。

本地存储加密的基本实现

在安全敏感的应用场景中，我们经常需要对存储在本地存储中的数据进行加密处理。下面是一个典型的实现方案：

import CryptoJS from 'crypto-js';

export class CryptUtil {
  static readonly Key: string = 'your-secret-key';

  static encrypt(value: any): string {
    return CryptoJS.AES.encrypt(JSON.stringify(value), CryptUtil.Key).toString();
  }

  static decrypt(encryptedValue: string): any {
    const bytes = CryptoJS.AES.decrypt(encryptedValue, CryptUtil.Key);
    return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
  }
}

然后在创建Elf store时，我们可以利用preStoreInit和preStorageUpdate钩子来实现数据的加密和解密：

const accountStore = createStore({ name }, withProps<AccountProps>({ user: null }));

const preStoreInit = (state: StoreValue<any>) => {
  return CryptUtil.decrypt(state);
};

const preStorageUpdate = (storeName: string, state: Partial<AccountProps>) => {
  return CryptUtil.encrypt(state);
};

export const persist = persistState(accountStore, {
  key: name,
  storage: localStorageStrategy,
  preStoreInit,
  preStorageUpdate
});

实现过程中遇到的问题

在实际应用中，开发者遇到了一个关键问题：当从本地存储读取数据时，preStoreInit接收到的参数并不是原始的加密字符串，而是被转换成了一个对象。这导致解密操作失败，因为解密函数期望接收的是一个字符串。

具体表现为：

存储在本地存储中的是加密后的字符串
当从本地存储读取时，这个字符串被转换成了一个对象
解密函数无法处理这种对象格式，导致解密失败

问题原因分析

这个问题的根源在于Elf的内部实现机制。Elf期望store的状态始终是一个对象，因此在从本地存储读取数据时，会尝试将存储的值转换为对象格式。对于字符串值，它会将这个字符串拆分为字符数组，然后转换为一个对象。

例如，加密字符串"U2FsdGVkX1..."会被转换为：

{
  "0": "U",
  "1": "2",
  "2": "F",
  // ...其他字符
  "user": null
}

这种自动转换行为使得原始的加密字符串无法被正确识别和解密。

解决方案

临时解决方案

开发者提出了一个临时解决方案，通过从转换后的对象中提取原始字符串：

const preStoreInit = (state: StoreValue<any>) => {
  const { user, ...encryptedValue } = state;
  const value = Object.values(encryptedValue).join('');
  return CryptUtil.decrypt(value);
};

这种方法虽然可行，但不够优雅，且依赖于Elf内部实现的细节，可能在未来的版本中失效。

更优雅的解决方案

更合理的解决方案是修改Elf的源代码，使其支持原始字符串值的处理。具体来说，可以在persist-state.ts中添加对非对象值的支持：

const loadFromStorageSubscription = from(
  storage.getItem(merged.key!)
).subscribe((value) => {
  if (value) {
    store.update((state) => {
      return merged.preStoreInit!({
        ...state,
        isObject(value)
          ? {
              ...value,
            }
          : value,
      });
    });
  }
  initialized.next(true);
  initialized.complete();
});