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

Question

我正在使用 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)
      }
    })
  ]
});

Answer 1

因为https://www.npmjs.com/package/secure-ls#api-documentation需要一个encryptionSecret，所以如果我们忘记设置这个选项，那么每次刷新你的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: "",
  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);

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

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

How to prevent vuex state from resetting while using Secure-ls?

vue.js

security

local-storage

vuex

persistent-storage