로그아웃 시 vuex 비어 있는 상태

로그아웃 시 vuex 비어 있는 상태

내 문제에 대한 간단한 이야기:

1. 페이지가 로드될 때 내 vuex 상태에 데이터가 전혀 저장되지 않음
2. 사용자가 로그인한 경우(또는 저장된 정보가 있는 경우)window.localStorage따라서 vuex 저장소는 인증이 필요한 소켓에서 모든 정보를 검색한다.
3. 그러면 사용자가 로그아웃하지만 내 vuex 상태 저장은 여전히 모든 데이터를 보존함

이는 공용 PC에 로그인하지 않은 사용자(또는 해커)가 사용자가 로그아웃하기 전의 상태를 볼 수 있기 때문에 보안 문제가 될 수 있다.

vuex 매장에서 어떻게 주/도를 지우는지 봤어?그러나 나는 이것이 해킹이며 피해야 한다고 생각한다.

현재 해결책은 단지 페이지를 새로 고치는 것이다.location.reload();

이 데이터 유출을 막을 더 좋은 방법이 있을까?

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");사용자가 로그아웃할 때.

노멀 어프로치

사용자가 로그인한 경우 몇 개의 부울 플래그를 추가하여 사용자가 로그인/로그아웃되었는지 확인할 수 있다.

그래서 초기 접근방식은 -

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로 설정해야 한다. In component -

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브룩스와의 교류의 일환으로

이 내선 번호로는 https://www.npmjs.com/package/vuex-extensions이 좋다.

설치된 경우 Vuex 로그아웃 작업에서 재설정을 호출할 수 있음

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");
  }

시간이 늦을 수 있지만 window.localStorage.removeItem('vuex')이 유용하다는 것을 알았다.Thomas von Deyen 덕분에 https://github.com/championswimmer/vuex-persist/issues/52#issuecomment-413913598

참조URL: https://stackoverflow.com/questions/49548622/vuex-empty-state-on-logout