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

【问题标题】：How to prevent vuex state from resetting while using Secure-ls?使用 Secure-ls 时如何防止 vuex 状态重置？
【发布时间】：2020-08-01 14:32:43
【问题描述】：

我正在使用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】：

由于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);

注意：请考虑到这不是解决您问题的金钥匙，但为了安全而拥有某种东西总比没有任何东西要好。

【讨论】：