如何防止在使用Secure ls时重置vuex状态

Question

我正在使用https://www.npmjs.com/package/secure-ls压缩和加密我的vuex-oath信息，并在页面刷新后保持vuex-persistedstate。所有这些都可以，工作得很好，但当我将encodingType:"aes">添加到安全的ls选项时，会发生一些奇怪的事情。它使persistent不再工作，我的意思是，当我刷新页面时，状态消失了。我该怎么解决这个问题？

import Vue from "vue";
import Vuex from "vuex";
import oauthTokenModule from "./modules/oauthToken";
import createPersistedState from "vuex-persistedstate";
import SecureLS from "secure-ls";
const ls = new SecureLS({ encodingType: "aes", isCompression: true });
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
oauthTokenModule
},
plugins: [
createPersistedState({
paths: ["oauthTokenModule"],
storage: {
getItem: key => ls.get(key),
setItem: (key, value) => ls.set(key, value),
removeItem: key => ls.remove(key)
}
})
]
});

Answer 1

Ashttps://www.npmjs.com/package/secure-ls#api-需要encryptionSecret的文档，所以如果我们忘记设置此选项，那么在每次刷新时，您的vuex数据都将被丢弃。顺便说一句，如果你想使用安全ls，你应该向它传递一个如下的对象：

{
encodingType: "aes",
encryptionSecret: "along and specific key here",
isCompression: true
}

您可以使用https://www.npmjs.com/package/simple-browser-fingerprint每个浏览器都有一个好的密钥，所以完整的答案可以像下面这样仅用于生产模式：

//securityOptions.ts";
import simpleBrowserFingerprint from "simple-browser-fingerprint";
const securityOptions = {
encodingType: "",
encryptionSecret: undefined,
isCompression: false
};
if (process.env.NODE_ENV === "production")
Object.assign(securityOptions, {
encodingType: "aes",
encryptionSecret: simpleBrowserFingerprint(),
isCompression: true
});
export default securityOptions;
//store.js
import securityOptions from "@/store/securityOptions";
const ls = new SecureLS(securityOptions);

注意：请考虑这不是解决你问题的金钥匙，但为了安全起见，有东西总比什么都没有好。