主应用程序/调用存储模块

Question

我正在创建SPA，但有一个问题与vuex商店和cookie（vue-cookies）有关。用户登录时，Vue执行代码

store: {
    username: window.$cookies.get('username') || null;
}

商店：

logIn (state) {
  this.state.username = window.$cookies.get('username');
}

变异：

script

之后，用户成功登录，用户名存储在vuex存储中。但是，有一个问题，当cookie过期时，vuex存储不会删除用户名。关于Cookie过期后如何自动删除用户名的任何建议？

Answer 1

当您检测到用户不再登录或未通过身份验证时，可以将商店中的username设置为''。

关于我的评论，这里有一些代码可供查看。

您正在为身份验证做任何事情吗？之前，我已经通过实现身份验证并在用户未经身份验证时删除Cookie /缓存的登录数据来处理此类问题。在我们的一个项目中，我们创建了一个auth.js存储模块来处理身份验证。

我知道这并不能直接回答您的问题，即在设定的时间后自动从商店中删除东西。但是，当cookie过期或被删除时，它应该清除存储的值。还没有测试。

主应用程序/调用存储模块

const store = new Vuex.Store({
    modules: {
      auth
    }
})

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})


<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
export default {
    name: "app",
    mounted() {
        let username = 'player1';
        this.$store.dispatch("LOGIN", username);
      }
}
</script>

store / auth.js模块

const state = { 
    username: {},
    isautheticated: {}
}

const getters = {
    username: state => state.username,
    isautheticated: state => state.isautheticated,
}

const mutations = {
    SET_USERNAME: function(state, username){
        state.username = username;
    },
    SET_ISAUTHENTICATED: function(state, isautheticated){
        state.isautheticated = isautheticated;
    },
}

const actions = {
    LOGIN: ({commit, dispatch}, username) => {
        if (!window.$cookies.get('username')) {
            //not logged in, create cookie based on username

            //save username in store by committing a mutation
            commit(SET_USERNAME, username);
        } 
    },
    LOGOUT: ({commit, dispatch}) => {
        //remove cookie
        //window.$cookies.remove('username')

        //clear username
        commit(SET_USERNAME, '');
    },
    IS_AUTHENTICATED: ({commit, dispatch}) =>
    {
        //loop into your authentication module and clear the cookie if user becomes unauthenticated
        //added an arbitrary isautheticated value to the store for an example
        if(!state.isautheticated) {
            commit(SET_USERNAME, '');
        }
    }
}

export default {
    getters,
    mutations,
    actions,
    state
}

如果您不调出服务来进行身份验证或获取用户数据，那么在存储LOGIN操作中拥有这种逻辑可能就太过分了。

与vuex商店+ Cookie相关的问题

1 个答案:

主应用程序/调用存储模块

store / auth.js模块