vue 整合 secure-ls 和 vuex-persistedstate 实现 vuex 加密持久化

vue 整合 secure-ls 和 vuex-persistedstate 实现 vuex 加密持久化

依赖模块

npm install secure-ls
npm install vuex-persistedstate

store 配置

import Vue from 'vue'
import Vuex from 'vuex'
import SecureLS from "secure-ls"
import createPersistedState from "vuex-persistedstate"
var ls = new SecureLS({
    encodingType: "aes",
    isCompression: false,
    encryptionSecret: "old-beauty"
});
Vue.use(Vuex)

const store = new Vuex.Store({
    plugins: [
        createPersistedState({
            key: "oldBeautyStore",
            storage: {
                getItem: key => ls.get(key),
                setItem: (key, value) => ls.set(key, value),
                removeItem: key => ls.remove(key)
            }
        })
    ],
    state: {
        hasLogin: false,
        userInfo: {}
    },
    mutations: {
        login(state, provider) {
            state.hasLogin = true;
            state.userInfo = provider;
        },
        logout(state) {
            state.hasLogin = false;
            state.userInfo = {};
        }
    },
    getters:{
        getUserInfo(state) {
            return state.userInfo;
        }
    }
})

export default store

实现效果
在浏览器调试控制台中以加密形式显示，并且 getter 可以正常获取到数据