注销时的vuex空状态

Question

我的问题的快速故事：

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

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

我见过How to clear state in vuex store? 但我觉得这是一种 hack，应该避免。

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

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

Answer 1

这可能晚了，但我发现 window.localStorage.removeItem('vuex') 很有用。感谢 Thomas von Deyen，https://github.com/championswimmer/vuex-persist/issues/52#issuecomment-413913598

Answer 2

这个扩展做得很好 https://www.npmjs.com/package/vuex-extensions

安装后，我可以在 Vuex 注销操作中调用 reset

logout(context) {
  
    // do the logout stuff, such as 
    context.commit("setUser", {});

    // On logout, clear all State, using vuex-extensions
    this.reset();

    // if using router, change to login page   
    router.replace("/login");
  }

Answer 3

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

因此，为了重置状态，必须将初始存储模块复制为值。

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

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

// 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");。

Answer 4

正常方法

如果用户登录，那么您可以添加一些布尔标志来确保用户已经登录/注销。

所以最初的方法是 -

this.$store.commit('insertToken', {realtoken, isLoggedIn: true})

在vuex中比，

insertToken (state, payload) {
  state.token = payload.realtoken
  state.isLoggedIn = payload.isLoggedIn
  localStorage.setItem('token', payload.realtoken)
}

当用户注销时，您应该将所有标志设置为 false， 在组件中 -

logout () {
    this.$store.commit('logOut')
    this.$router.replace('/login')
  }

在 vuex 中，

logOut (state, payload) {
  state.token = null
  state.isLoggedIn = false
  localStorage.setItem('token', null)
},

因此，通过isLoggedIn 和token，您可以使用名为Navigation Guards 的术语告诉路由器导航到哪里

示例 -

const checkToken = () => {

if ((localStorage.getItem('token') == null) || 
 (localStorage.getItem('token') == undefined)) {
  return false
 } else {
   return true
 }
}

// Navigation guards
if (to.path === '/') {
 if (checkToken()) {
   next()
 } else {
  router.push('/login')
 }

}

这是我在通过使用 token 作为与 Vuex 交互的一部分来完成身份验证时使用的方式。