Как предотвратить сброс состояния vuex при использовании Secure-ls? - PullRequest
Новая
       51

Как предотвратить сброс состояния vuex при использовании Secure-ls?

0 голосов
/ 19 апреля 2020

Я использую https://www.npmjs.com/package/secure-ls для сжатия и шифрования моей информации vuex ouath и vuex-persistedstate, чтобы она сохранялась после обновления страницы sh. все это нормально и работает хорошо, но происходит нечто странное, когда я добавляю 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)
      }
    })
  ]
});

1 Ответ

0 голосов
/ 05 мая 2020

Как https://www.npmjs.com/package/secure-ls#api -документация , для которой требуется секретный секрет, поэтому если мы забудем установить эту опцию, то при каждом обновлении sh ваши данные 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);

Примечание: пожалуйста, учтите, что это не золотой ключ к вашей проблеме, но иметь что-то для безопасности лучше, чем не иметь ничего.

...