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

问题描述 投票:0回答:1

我正在使用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)
      }
    })
  ]
});
vue.js security local-storage vuex persistent-storage
1个回答
0
投票

作为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);

注:请注意,这不是解决问题的金钥匙,但是拥有安全性总比没有任何东西要好。

© www.soinside.com 2019 - 2024. All rights reserved.