添加encodingType: "aes"后Secure-LS致Vuex状态重置如何修复？

我之前也碰到过一模一样的情况——加了encodingType: "aes"后，页面刷新就丢状态，折腾了好一会儿才找到问题根源。主要是两个核心点没处理好：AES加密需要固定密钥，以及序列化逻辑冲突，下面一步步给你解决：

1. 给Secure-LS配置合法的固定AES密钥 #

Secure-LS的AES模式要求密钥长度严格符合AES标准：

• 16字符对应AES-128
• 24字符对应AES-192
• 32字符对应AES-256

你之前的代码没指定secret，虽然库会自动生成默认密钥，但页面刷新后可能会生成新的默认密钥，导致无法解密之前存储的状态，自然就拿不到数据了。所以必须手动指定一个固定密钥：

const ls = new SecureLS({ 
  encodingType: "aes", 
  isCompression: true,
  secret: "your-32-character-secure-secret-key" // 替换成你的密钥，推荐用32位的AES-256
});

2. 避免vuex-persistedstate和Secure-LS的序列化冲突 #

vuex-persistedstate默认会把Vuex状态序列化为JSON字符串，而Secure-LS自身也会对存储的对象做序列化/反序列化处理，两层序列化会导致数据格式错乱，解密后无法正确解析为Vuex状态。

解决方法是让vuex-persistedstate跳过序列化，直接把状态对象交给Secure-LS处理：

createPersistedState({
  paths: ["oauthTokenModule"],
  storage: {
    getItem: key => ls.get(key),
    setItem: (key, value) => ls.set(key, value),
    removeItem: key => ls.remove(key)
  },
  // 禁用vuex-persistedstate的序列化逻辑，交给Secure-LS处理
  serialize: (state) => state,
  deserialize: (state) => state
})

3. 验证修复效果 #

修改完代码后，你可以做个简单测试：

• 登录获取oauth信息后，打开浏览器控制台，用ls.get('vuex')（默认存储key是vuex）查看是否能正确取出状态对象。
• 刷新页面后，调用store.state.oauthTokenModule，确认状态是否正常恢复。

如果还是有问题，可以排查：

• 密钥是否固定，不要在每次页面加载时动态生成密钥。
• 确保Secure-LS版本≥1.2.0，vuex-persistedstate版本≥3.0.0，避免版本兼容问题。

内容的提问来源于stack exchange，提问作者SeyyedKhandon