注销时 vuex 为空状态

Question

我的问题的快速故事：

1. 页面加载时绝对没有数据存储在我的 vuex 状态中
2. 如果用户已登录（或存储了信息window.localStorage并因此自动登录），我的 vuex 存储将从需要身份验证的套接字中检索所有信息。
3. 然后用户注销，但我的 vuex 状态保存仍然保留其所有数据

这将是一个安全问题，因为在公共 PC 上未登录的人（或黑客）可以查看用户注销前的状态。

我看过如何清除 vuex 商店中的状态？ 但我觉得这是一种黑客行为，应该避免。

我目前的解决方案只是使用刷新页面 location.reload();

有没有更好的方法来防止这种数据泄漏？

Answer 1

存储在 Vue 中的所有对象都充当observable。因此，如果值的引用被更改/变异，它也会触发实际值的更改。

所以，为了复位的状态下的初始存储模块必须被复制为一个值。

在注销用户时，必须为每个模块分配相同的值作为副本。

这可以通过以下方式实现：

// store.js

// Initial store with modules as an object
export const initialStoreModules = {
    user,
    recruitment,
};

export default new Vuex.Store({
    /**
     * Assign the modules to the store 
     * using lodash deepClone to avoid changing the initial store module values
     */
    modules: _.cloneDeep(initialStoreModules),
    mutations: {
        // reset default state modules by looping around the initialStoreModules
        resetState(state) {
        _.forOwn(initialStoreModules, (value, key) => {
            state[key] = _.cloneDeep(value.state);
        });
        },
    }
});

然后commit("resetState");在用户注销时调用。