Sayfa yenilemede Vuex durumu

Uygulamam Kullanıcı Kimlik Doğrulaması için Firebase API'yi kullanıyor ve Giriş durumunu Vuex Durumunda boole değeri olarak kaydediyor.

Kullanıcı oturum açtığında, oturum açma durumunu ayarlıyorum ve buna göre Koşullu olarak Oturum Aç / Oturumu Kapat düğmesini görüntülüyorum.

Ancak sayfa yenilendiğinde, vue uygulamasının durumu kaybolur ve varsayılana sıfırlanır

Bu, kullanıcı oturum açtığında ve sayfa yenilendiğinde bile bir soruna neden olur, oturum açma durumu yanlış olarak ayarlanır ve kullanıcı oturum açmış durumda kalsa bile oturum kapatma düğmesi yerine oturum açma düğmesi görüntülenir ...

Bu davranışı önlemek için ne yapmalıyım

Çerezleri kullanmalı mıyım yoksa daha iyi bir çözüm var mı ...

-

Bu bilinen bir kullanım durumudur. Farklı çözümler var.

Örneğin, biri kullanılabilir vuex-persistedstate. Bu, vuexsayfa yenilemeleri arasındaki durumu işlemek ve depolamak için bir eklentidir .

Basit kod:

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

Burada yaptığımız şey basit:

1. yüklemen gerek js-cookie
2. üzerinde getStatekaydedilmiş durumu yüklemeye çalışıyoruzCookies
3. üzerinde setStatedevletimizi kurtarıyoruzCookies

Belgeler ve kurulum talimatları: https://www.npmjs.com/package/vuex-persistedstate

VueX durumunuzu oluştururken, vuex-persistedstate eklentisini kullanarak oturum depolamaya kaydedin . Bu şekilde, tarayıcı kapatıldığında bilgiler kaybolacaktır. Bu değerler istemci ve sunucu arasında gidip geleceği için tanımlama bilgilerini kullanmaktan kaçının.

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();Kullanıcı manuel olarak çıkış yaptığında kullanın .

Vuex durumu bellekte tutulur. Sayfa yükleme, bu mevcut durumu temizleyecektir. Durumun yeniden yüklemede ısrar etmemesinin nedeni budur.

Ancak vuex-persistedstateeklenti bu sorunu çözer

npm install --save vuex-persistedstate

Şimdi bunu mağazaya aktarın.

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

Tek bir kod satırıyla mükemmel çalıştı: plugins: [createPersistedState()]

Oturum açma durumunu kaydetmek için tanımlama bilgileri / localStorage kullanmanın bazı durumlarda bazı hatalara neden olabileceğini düşünüyorum.
Firebase, expirationTime ve refreshToken dahil olmak üzere localStorage'da bizim için giriş bilgilerini zaten kaydetmiştir.
Bu nedenle, giriş durumunu kontrol etmek için Vue tarafından oluşturulan kancayı ve Firebase API'yi kullanacağım.
Jetonun süresi dolduysa, API bizim için jetonu yenileyecektir.
Böylece uygulamamızdaki giriş durumunun Firebase'e eşit olduğundan emin olabiliriz.

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

devlet koymak:

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

mutasyonları koymak:

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

benim için iyi çalışıyor!

Bunu her yeniden yüklediğimde başlıklarımı sıfırlayarak çözdüm ve kullanıcı verilerini de getirdim, neyin daha iyi olduğunu bilmiyorum ...

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

})