我正在使用https://www.npmjs.com/package/secure-ls压缩和加密我的vuex ouath信息,并使用vuex-persistedstate使其在页面刷新后仍然存在。每种方法都可以正常工作,但是当我将encodingType:“ aes”添加到secure-ls选项时,发生了一些奇怪的事情。它使持久性不再起作用,我的意思是当我刷新页面时,状态消失了。我该如何解决?
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)
}
})
]
});
作为https://www.npmjs.com/package/secure-ls#api-documentation,需要加密密钥,因此,如果我们忘记设置此选项,那么在每次刷新时,您的vuex数据都会被丢弃。顺便说一句,如果您想使用secure-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: undefined as unknown,
encryptionSecret: undefined as unknown,
isCompression: undefined as unknown
};
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);
注:请注意,这不是解决问题的金钥匙,但是拥有安全性总比没有任何东西要好。