Vuex 상태에서 페이지를 새로 고침

내 응용 프로그램을 사용 중포 기지 API 에 대한 사용자 인증을 저장하는 로그인 상태로 부울 값을 Vuex 상태입니다.

사용자가 로그인할 때에 내가 설정한로그인 상태과 조건에 따라 표시하는 로그인/로그아웃 버튼을 따라.

하지만 페이지를 새로 고쳐지는,국가의 vue 용 손실 및 기본값으로 재설정

이로 인해 문제로는 경우에도 사용자로 로그인하고 페이지를 새로 고침한로그인 상태를 다시 설정false로그인 버튼을 대신에 표시 로그아웃 버튼 사용자 로그인 유지....

내가 무엇을 하여야 이를 방지하기 위해 행동

내가 사용쿠키 또는 다른 더 나은 솔루션을 사용할 수 있습니다...

Jonathan Soifer
편집된 질문11일 8월 2017 в 5:40
프로그래밍
state vue.js vuejs2 vuex
26일 3월 2017 в 10:19
1523 파운드
질문에 대한 의견 (4)
해결책

이것은 알려진 사용한 경우. 거기에 다양한 솔루션을 제공합니다.

예를 들어,하나를 사용할 수 있vuex-persistedstate. 이러한vuex을 취급 및 저장소 사이의 상태에 있는 페이지를 새로 고칩니다.

샘플 코드:

``js 가져오기{저장}에서'vuex' 가져오기 createPersistedState 에서'vuex-persistedstate' 가져오기*으로 쿠키에서'js-cookie'

const 저장=new 저장({ //... 플러그인:[ createPersistedState({ getState:(키)=>쿠키입니다.getJSON(키), setState:(키는 상태)=>쿠키입니다.세트(키,주{이 만료되:3,안전한:true}) }) ] }) ``

우리가 무엇을 여기에는 간단하다:

  1. 를 설치해야 합js-쿠키
  2. 에getState우리를 로드하려고 하 저장된 상태에서쿠키
  3. 에setState우리는 우리의 상태는쿠키

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

Kasai.
편집된 답변3일 11월 2019 в 10:03
해설 (6)

내가 생각하는 쿠키를 사용/로컬 저장소를 저장하는 로그인 상태를 일으킬 수 있습에 오류가 어떤 상황이다.
중포 기지는 이미 기록은 로그인 정보에서 로컬 저장소에 대한 우리를 포함 expirationTime 및 refreshToken.
그러므로 내가 사용하는 것 Vue 만든 후크와 중포 기지 api 로그인 상태 확인.
는 경우 토큰료,api 것입니다 새로 고침을 위한 토큰 us.
그래서 우리는 확인할 수 있습 로그인 상태 디스플레이에 우리의 응용 프로그램은 동일한 중포 기지.

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.');
            }
        });
    },
});
oahehc
편집된 답변23일 5월 2018 в 2:56
해설 (0)

에 넣어 상태:

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

에 넣고 돌연변이:

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

잘 작동합니다.

해설 (0)

나는've 해결이 다시 설정하여 내 헤더를 모든 시간을 내가 다시 부하 또한 사용자 데이터를 가져올,I don't know what 입니다.

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()
                            })
                    }
                }
            }
        })

})
해설 (0)

을 만들 때 VueX 상태로 저장하고 세션 상태입니다. 이 방식에서는 정보 손실됩니다 브라우저를 닫습니다. 피 쿠키의 사용으로 이러한 값 사이에 여행 할 것이다 클라이언트와 서버입니다. 

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();때 사용자를 로그 아웃합니다.

James Westgate
편집된 답변13일 11월 2019 в 4:57
해설 (0)