vuex 스토어 + 쿠키와 관련된 문제

vuex 스토어 + 쿠키와 관련된 문제

SPA를 만들고 있는데 vuex 스토어와 쿠키(vue-cookies)에 관한 문제가 하나 있습니다.사용자가 로그인하면 vue가 코드를 실행합니다.

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

스토어:

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

돌연변이:

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

그런 다음 사용자가 로그인하고 사용자 이름이 vuex 저장소에 저장됩니다.그러나 쿠키가 만료될 때 vuex 스토어에서 사용자 이름을 제거하지 않는 문제가 있습니다.쿠키가 만료되었을 때 사용자 이름을 자동으로 삭제하는 방법에 대한 제안 사항이 있습니까?

설정만 하면 됩니다.username을 위해 매장 내에서''사용자가 더 이상 로그인 또는 인증되지 않은 것을 감지한 시점입니다.

제 코멘트입니다만, 여기 작은 코드가 있습니다.

연결할 수 있는 인증을 위해 어떤 작업을 하고 있습니까?이전에도 사용자가 인증되지 않았을 때 인증을 구현하고 쿠키/캐시된 로그인 데이터를 삭제함으로써 이러한 작업을 처리한 적이 있습니다.우리의 프로젝트 중 하나에서 우리는auth.jsstore module을 사용하여 인증을 처리합니다.

정해진 시간이 지나면 자동으로 스토어에서 삭제되는 것에 대한 당신의 질문에 대한 직접적인 답변은 아니라는 것을 알고 있습니다.그러나 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.module

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사용자 데이터의 인증이나 취득을 위해 서비스를 호출하지 않는 경우, 액션은 과잉인 경우가 있습니다.

언급URL : https://stackoverflow.com/questions/53767086/issue-which-is-related-to-vuex-store-cookies