페이지 새로 고침 시 Vuex 상태

페이지 새로 고침 시 Vuex 상태

내 앱은 사용자 인증을 위한 Firebase API를 사용하여 로그인 상태를 Vuex 상태에서 부울 값으로 저장한다.

사용자가 로그인하면 로그인 상태를 설정하고 그에 따라 Login/Logout 버튼을 조건부로 표시한다.

그러나 페이지가 새로 고쳐지면 vue 앱의 상태가 손실되고 기본값으로 재설정됨

이는 사용자가 로그인하여 페이지를 새로 고치는 경우에도 로그인 상태가 다시 false로 설정되고 로그인 버튼 대신 로그인 버튼이 표시되므로 문제가 발생한다....

어떻게 해야 이런 행동을 막을 수 있을까.

쿠키를 사용할까 아니면 다른 더 좋은 해결책이 나올까...

-

이것은 알려진 사용 사례다.다른 해결책이 있다.

예를 들어, 한 사람이 사용할 수 있다.이것은 의 플러그인이다.vuex페이지 새로 고침 사이의 상태를 처리하고 저장한다.

샘플 코드:

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      getState: (key) => Cookies.getJSON(key),
      setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true })
    })
  ]
})

여기서 하는 일은 간단하다.

1. 설치해야 함
2. 에 관하여getState저장된 상태를 로딩하려고 함Cookies
3. 에 관하여setState우리는 우리의 주를 에 구한다.Cookies

문서 및 설치 지침: https://www.npmjs.com/package/vuex-persistedstate

VueX 상태를 생성할 때 Vuex-persistedstate 플러그인을 사용하여 세션 스토리지에 저장하십시오.이렇게 하면 브라우저가 닫히면 정보가 손실된다.쿠키 값은 클라이언트와 서버 간에 이동하므로 쿠키를 사용하지 마십시오.

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex);

export default new Vuex.Store({
    plugins: [createPersistedState({
        storage: window.sessionStorage,
    })],
    state: {
        //....
    }
});

사용하다sessionStorage.clear();사용자가 수동으로 로그아웃할 때

편집: 스토어에 본질적으로 문자열 유형이 아닌 값(예: 날짜)이 있는 경우, 일련화/직렬화 프로세스가 이러한 값을 문자열로 변환하기 때문에 응용 프로그램이 실패하거나 동작이 변경될 수 있다는 점에 유의하십시오.

Vuex 상태는 기억 속에 보관된다.페이지 로드는 이 현재 상태를 제거한다.이것이 국가가 재장전 시 지속되지 않는 이유다.

그러나 플러그인이 이 문제를 해결함

npm install --save vuex-persistedstate

이제 이것을 상점으로 가져와라.

import Vue from 'vue'
import Vuex from 'vuex'
import account from './modules/account'
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    account,
  },
  plugins: [createPersistedState()]
});

코드 한 줄로 완벽하게 작동했다.plugins: [createPersistedState()]

쿠키/localStorage를 사용하여 로그인 상태를 저장하면 일부 상황에서 오류가 발생할 수 있다고 생각해.
Firebase에서 이미 localStorage에 로그인 정보를 기록함 만료 포함시간 및 새로 고침토큰
그래서 나는 Vue created hook과 Firebase api를 사용하여 로그인 상태를 확인할 것이다.
토큰이 만료된 경우 api는 토큰을 새로 고쳐줄 것이다.
그래서 우리 앱의 로그인 상태 디스플레이가 Firebase와 동일한지 확인할 수 있다.

new Vue({
    el: '#app',
    created() {
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                log('User is logined');
                // update data or vuex state
            } else {
                log('User is not logged in.');
            }
        });
    },
});

을 공식화하다:

producer: JSON.parse(localStorage.getItem('producer') || "{}")

돌연변이를 일으키다:

localStorage.setItem("producer",JSON.stringify(state.producer)) // OR
localStorage.removeItem("producers");

나한테는 잘 어울려!

다시 로드할 때마다 머리글을 재설정하여 이 문제를 해결했는데, 사용자 데이터를 가져올 때마다 어떤 점이 더 나은지 잘 모르겠다.

new Vue({
    el: 'vue',
    render: h => h(VueBox),
    router,
    store,

    computed: {
        tokenJWT () {
            return this.$store.getters.tokenCheck
        },
    },


    created() {
        this.setAuth()

    },

    methods:
        Object.assign({}, mapActions(['setUser']), {

            setAuth(){
                if (this.tokenJWT) {
                    if (this.tokenJWT === 'expired') {
                        this.$store.dispatch('destroyAuth')
                        this.$store.dispatch('openModal')
                        this.$store.dispatch('setElModal', 'form-login')

                    } else {
                        window.axios.defaults.headers.common = {
                            'Accept': 'application/json',
                            'Authorization': 'Bearer ' + this.tokenJWT
                        }
                        axios.get( api.domain + api.authApi )
                            .then(res => {
                                if (res.status == 200) {
                                    this.setUser( res.data.user )
                                }
                            })
                            .catch( errors => {
                                console.log(errors)
                                this.destroyAuth()
                            })
                    }
                }
            }
        })

})

컴포지션 api로 하는 방법은 다음과 같다.

npm install --save vuex-persistedstate

import createPersistedState from "vuex-persistedstate";
import { createStore } from "vuex";

export default createStore({
  state: {
    project_id: 1,
  },
  mutations: {
    setProjectId(state, payload) {
      state.project_id = payload;
    },
  },
  getters: {},
  actions: {},
  plugins: [createPersistedState()],
});

이 가장 이 경장 장장 가장 장장npm install 설치 --vuex-persstate 장장장.
- "vuex-persiststate"에서 그런 다음 다음과 같이 생성저장소에 저장하십시오.

plugins: [createPersistedState()],
    state(){
        return{
            isActive: false,
        }
    }

참조URL: https://stackoverflow.com/questions/43027499/vuex-state-on-page-refresh