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

在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接收到的参数并不是原始的加密字符串，而是被转换成了一个对象。这导致解密操作失败，因为解密函数期望接收的是一个字符串。

具体表现为：

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

问题原因分析

这个问题的根源在于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();
});

这种修改允许preStoreInit接收原始字符串值，从而可以直接进行解密操作。

最佳实践建议

1. 类型安全：确保加密解密函数的输入输出类型明确，避免隐式类型转换带来的问题。

2. 错误处理：在解密函数中添加适当的错误处理，防止因格式错误导致应用崩溃。

3. 密钥管理：不要将加密密钥硬编码在代码中，考虑使用环境变量或其他安全方式来管理密钥。

4. 性能考虑：对于大型状态对象，加密解密操作可能会影响性能，需要进行适当的优化。

5. 兼容性考虑：如果修改Elf源代码，需要考虑未来升级的兼容性问题。

总结

在Elf项目中实现本地存储加密是一个常见的需求，但需要注意Elf内部对状态对象的处理机制。通过理解其工作原理，我们可以找到合适的解决方案来实现安全的状态持久化。对于这类需求，建议与社区保持沟通，或者考虑提交PR来增强官方支持，从而获得更稳定和长期的解决方案。