Состояние Vuex при обновлении страницы

мое приложение использует API Firebase для аутентификации пользователя, сохраняя статус входа в систему как логическое значение в состоянии Vuex.

когда пользователь входит в систему, я устанавливаю статус входа и условно отображать кнопку входа / выхода из системы соответственно.

но когда страница обновляется, состояние приложения vue теряется и сбрасывается по умолчанию

Это вызывает проблему, как даже когда пользователь вошел в систему и страница обновляется Регистрация статус устанавливается false и кнопка входа в систему отображается вместо кнопки выхода из системы, даже если пользователь остается в системе....

что я должен сделать, чтобы предотвратить это поведение

должен ли я использовать печенье Или любое другое лучшее решение...

    -
23
state vue.js vuejs2 vuex

3 ответов

это известный usecase. Существуют различные решения.

например, можно использовать 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. on getState мы пытаемся загрузить сохраненное состояние из Cookies
  3. on setState мы сохраняем наше государство Cookies

документы и инструкции по установке:https://www.npmjs.com/package/vuex-persistedstate

37

Я думаю, что использование cookies / localStorage для сохранения статуса входа может вызвать некоторую ошибку в некоторой ситуации.
Firebase уже записывает регистрационную информацию в localStorage для нас, включая expirationTime и refreshToken.
Поэтому я буду использовать 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.');
            }
        });
    },
});
3

Я решил это, сбросив мои заголовки каждый раз, когда я перезагружаю также получить пользовательские данные, я не знаю, что лучше ...

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