페이지 새로 고침시 Vuex 상태

페이지 새로 고침시 Vuex 상태

---

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

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

그러나 페이지를 새로 고치면 vue 앱의 상태가되고 있습니다.

이로 인해 사용자가 로그인하고 페이지를 새로 고치 설정 로그인 상태 가 다시 false 로 설정 되고 사용자가 로그인 상태를 유지 로그 아웃 버튼 대신 로그인 버튼이 표시 문제가 발생합니다 ....

이 동작을 방지해야합니까?

를 쿠키 사용할까요 아니면 다른 더 나은 솔루션을 사용할 수 있습니까?

-

---

사용 사례입니다. 다른 해결책이 있습니다.

예를 들어 . 페이지 새로 고침 사이의 상태를 처리하고 저장하기 위한 플러그인입니다 .vuex-persistedstatevuex

샘플 코드 :

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. 당신은 설치해야합니다 js-cookie
2. 에 getState우리는에서 저장된 상태를Cookies
3. 에 setState우리는 우리의 상태를 저장Cookies

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

---

쿠키 / localStorage를 사용하여 로그인 상태를 저장하면 상황에 따라 오류가 저장됩니다.
Firebase는 이미 localStorage에 로그인 정보를 기록하고 있습니다.
따라서 Vue 생성 후크와 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()
                            })
                    }
                }
            }
        })

})

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