पृष्ठ ताज़ा पर Vuex राज्य

Question

मेरा ऐप Vuex State में बूलियन मान के रूप में लॉगिन स्थिति को सहेजते हुए, उपयोगकर्ता प्रमाणीकरण के लिए Firebase API का उपयोग करता है।

जब उपयोगकर्ता लॉग इन करता है तो मैं लॉगिन स्थिति निर्धारित करता हूं और सशर्त रूप से लॉगिन / लॉगआउट बटन को तदनुसार प्रदर्शित करता हूं ।

लेकिन जब पृष्ठ ताज़ा हो जाता है, तो vue ऐप की स्थिति खो जाती है और डिफ़ॉल्ट पर रीसेट हो जाती है

यह तब भी एक समस्या का कारण बनता है जब उपयोगकर्ता लॉग इन होता है और पेज रीफ्रेश होता है, लॉग इन स्टेटस वापस झूठी में सेट हो जाता है और लॉगआउट बटन के बजाय लॉगिन बटन प्रदर्शित होता है, भले ही उपयोगकर्ता लॉग इन रहे ...।

मैं इस व्यवहार को रोकने के लिए क्या करूंगा

क्या मैं कुकीज़ का उपयोग करता हूं या कोई अन्य बेहतर समाधान उपलब्ध है ...

-

Comments

मैं इसे संभालने के लिए किसी भी तरह के स्थानीय भंडारण का उपयोग करता हूं। यह कूकीज़ या कुछ और हो सकता है

— हैमरबोट

@El_Matella कुकीज़ के अलावा आप स्थानीय रूप से डेटा स्टोर करने के लिए और क्या तरीका

— अपनाते हैं

सामान्य तौर पर, मैं एक स्थानीय स्टोरेज एनपीएम पैकेज का उपयोग करता हूं जो मेरे लिए डेटा स्टोर करने के लिए सबसे अच्छी विधि चुन सकता है: npmjs.com/package/local-storage "एपीआई सभी चीजों के साथ बातचीत करने के लिए एक सरलीकृत तरीका है। वर्तमान ब्राउज़र में असमर्थित, इन-मेमरी स्टोर में गिरावट का पारदर्शी रूप से उपयोग किया जाता है। "

— हैमरबोट

@El_Matella आपको बहुत-बहुत धन्यवाद ... मेरे पास एक नज़र है

— बूमबॉक्सबॉय

Answer 1

यह एक ज्ञात उपयोग मामला है। अलग-अलग उपाय हैं।

उदाहरण के लिए, एक का उपयोग कर सकते हैं vuex-persistedstate। यह 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. आपको स्थापित करने की आवश्यकता है js-cookie
2. पर getStateहम से बचाया राज्य लोड करने का प्रयासCookies
3. पर setStateहम करने के लिए हमारे राज्य को बचाने केCookies

डॉक्स और इंस्टॉलेशन निर्देश: https://www.npmjs.com/package/vuex-persistedstate

Comments

धन्यवाद ... बस प्लगइन के github पृष्ठ को देख रहा था ... एक बार फिर धन्यवाद

— बूमबॉक्सबॉय

क्या आपको डेटा सेट / प्राप्त करने के लिए कुछ विशेष करने की आवश्यकता है? पुनः लोड करने पर मेरा डेटा डिफ़ॉल्ट रूप से रीसेट हो जाता है। बस इस के माध्यम से सेटिंग। $ store.state.user, कोशिश की वस्तुओं और सरल तार - कोई भाग्य नहीं।

— डॉग कॉफ़ी

क्योंकि कुकीज़ क्लाइंट और सर्वर के बीच संचरित होती हैं, मैं संभवतः इसके बजाय स्थानीय भंडारण को देखूंगा ...

— जेम्स वेस्टगेट

मैं aws की स्थिति को कैसे बढ़ाऊँ? कुकीज़ में फिट करने के लिए और के रूप में यह बड़ा है LocalStorage होगा सफारी निजी मोड पर काम नहीं

— पीछा

@ घायल मैं भी उसी मुद्दे का सामना कर रहा हूं, इसके लिए कोई समाधान मिला?

— आदिल

Answer 2

अपना 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();उपयोगकर्ता द्वारा लॉग आउट करते समय उपयोग करें ।

Comments

मुझे आश्चर्य है कि कुकीज़ समाधान में कई सितारे मिलते हैं। मुझे लगता है कि यह समाधान बहुत बेहतर है क्योंकि यह ब्राउज़र विंडो बंद होने पर सभी स्थिति को स्वचालित रूप से साफ़ करता है। मुझे सर्वर के रूप में अपना राज्य डेटा कुकी में भेजना पसंद नहीं है, और ब्राउज़र विंडो बंद होने पर मैं संवेदनशील डेटा को बनाए रखना नहीं चाहता।

— मार्क हेनर्स

आप कुकीज़ सहित अपने हेडर के साथ कुल मिलाकर 8k तक सीमित हैं।

— जेम्स वेस्टगेट

@MarkHagers और यह IE8 के बाद से मूल रूप से समर्थित है! अतिरिक्त कोड लोड करने की आवश्यकता नहीं है।

— फेबियन वॉन एलेर्ट्स

मुझे एक त्रुटि हो रही थी vuex-persistedstate.es.js?0e44:1 Uncaught (in promise) TypeError: Converting circular structure to JSON

— अकिन ह्वेन

@Akin - त्रुटि से आपको पता चलता है कि आपके राज्य में एक परिपत्र संदर्भ है, एक वस्तु किसी अन्य ऑब्जेक्ट को संदर्भित करती है जो अंततः पहले ऑब्जेक्ट पर वापस आती है।

— जेम्स वेस्टगेट

Answer 3

Vuex राज्य को स्मृति में रखा जाता है। पेज लोड इस वर्तमान स्थिति को शुद्ध करेगा। यही कारण है कि राज्य पुनः लोड पर कायम नहीं है।

लेकिन vuex-persistedstateप्लगइन इस मुद्दे को हल करता है

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

Answer 4

मुझे लगता है कि लॉगिन स्थिति को बचाने के लिए कुकीज़ / लोकलस्टोरेज का उपयोग कुछ स्थिति में कुछ त्रुटि का कारण हो सकता है।
Firebase पहले से ही हमारे लिए लोकलस्टोरेज में लॉगिन जानकारी दर्ज करता है, जिसमें एक्सपायर टाइम और रिफ्रेशटोकन शामिल हैं।
इसलिए मैं लॉगिन स्टेटस की जांच करने के लिए Vue create किए गए हुक और Firebase api का उपयोग करूंगा।
यदि टोकन की समय सीमा समाप्त हो गई थी, तो एपी हमारे लिए टोकन ताज़ा करेगा।
इसलिए हम सुनिश्चित कर सकते हैं कि हमारे ऐप में लॉगिन स्टेटस डिस्प्ले फायरबेस के बराबर है।

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.');
            }
        });
    },
});

Comments

इस स्थिति के खिलाफ सबसे अच्छा, आधिकारिक और अनुशंसित दृष्टिकोण

— एलिजिनियर

Answer 5

राज्य पर रखो:

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

म्यूटेशन पर रखें:

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

मेरे लिए ठीक काम करता है!

Answer 6

मैंने अपने हेडर को हर बार रीसेट करके इसे हल किया है जब मैं उपयोगकर्ता डेटा को फिर से लोड करता हूं, मुझे नहीं पता कि क्या बेहतर है ...

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

})