Мое приложение использует 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 }) }) ] })
Что мы делаем здесь просто:
js-cookie
getState
мы пытаемся загрузить сохраненное состояние изCookies
setState
мы сохраняем наше состояниеCookies
Документы и инструкции по установке: https://www.npmjs.com/package/vuex-persistedstate
источник
При создании состояния VueX сохраните его в хранилище сеанса с помощью плагина vuex-persistedstate . Таким образом, информация будет потеряна при закрытии браузера. Избегайте использования файлов 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-persistedstate.es.js?0e44:1 Uncaught (in promise) TypeError: Converting circular structure to JSON
Состояние Vuex хранится в памяти. Загрузка страницы очистит это текущее состояние. Вот почему состояние не сохраняется при перезагрузке.
Но
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()]
источник
Я думаю, что использование cookie / 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.'); } }); }, });
источник
поставить на состояние:
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() }) } } } }) })
источник