проблема, связанная с магазином vuex + куки

Question

Я создаю SPA, и у меня есть одна проблема, связанная с магазином vuex и файлами cookie (vue-cookies).Когда пользователь входит в систему, vue выполняет код

this.$cookies.set('username', 'player1', '1h');
this.$store.commit('logIn');

store:

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

мутации:

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

После этого пользователь успешно входит в систему и имя пользователяхранится в магазине Vuex.Однако существует одна проблема: когда срок действия файлов cookie истекает, vuex store не удаляет имя пользователя.Любые предложения по автоматическому удалению имени пользователя после истечения срока действия файлов 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 действие может быть излишним, если вы не обращаетесь к службе для аутентификации или получения пользовательских данных.