Стан Vuex при оновленні сторінки

У моїй програмі використовується Firebase API для автентифікації користувачів, зберігаючи статус входу як логічне значення у стані Vuex.

Коли користувач входить у систему, я встановлюю статус входу та відповідно відображаю кнопку Вхід / Вихід.

Але коли сторінку оновлено, стан програми vue втрачається та скидається до типового

Це спричиняє проблему, оскільки навіть коли користувач входить у систему та сторінка оновлюється, статус входу повертається у значення false, а кнопка входу відображається замість кнопки виходу, навіть якщо користувач залишається авторизованим ....

Що я повинен робити, щоб запобігти цій поведінці

Чи повинен я використовувати файли cookie або будь-яке інше краще рішення ...

-

Це відомий варіант використання. Є різні рішення.

Наприклад, можна використовувати 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

Створюючи свій стан VueX, збережіть його у сховищі сеансів за допомогою плагіна vuex-persistentstate . Таким чином, інформація буде втрачена при закритті браузера. Уникайте використання файлів cookie, оскільки ці значення будуть переміщуватися між клієнтом та сервером.

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();коли користувач виходить із системи вручну.

Стан 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()]

Я думаю, що використання cookies / localStorage для збереження статусу входу може спричинити помилку в певній ситуації.
Firebase вже записує інформацію для входу в localStorage для нас, включаючи expirationTime і refreshToken.
Тому я використовуватиму створений 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()
                            })
                    }
                }
            }
        })

})