I'm working on a web app using Vue.js/Vuex and when the user refreshes the page the state is lost.
I'm trying to persist some states in sessionStorage
, but I realized that a user can edit it and for example make a state true
and turn it into false
.
My question(s) are:
Can a user edit the sessionStorage
?
Is it safe to store a state in a sessionStorage
?
Can I persist the state in another way without adding another dependency on the project?
--------------UPDATE-----------------
For people with a similar problem I solved using beforeEnter and beforeEach so instead of trying to persist the state I go to a backend endpoint everytime the route changes (with beforeEach) and every page refresh (with beforeEnter).
Thanks to everyone for the helpful responses!
To persist Vuex state on page refresh, we can use the vuex-persistedstate package. import { Store } from "vuex"; import createPersistedState from "vuex-persistedstate"; import * as Cookies from "js-cookie"; const store = new Store({ // ...
To keep Vuex state on page refresh with Vue. js, we use the vuex-persistedstate package. import Vue from "vue"; import Vuex from "vuex"; import createPersistedState from "vuex-persistedstate"; Vue. use(Vuex); export default new Vuex.
A Typescript-ready Vuex plugin that enables you to save the state of your app to a persisted storage like Cookies or localStorage.
At the center of every Vuex application is the store. A "store" is basically a container that holds your application state. There are two things that make a Vuex store different from a plain global object: Vuex stores are reactive.
I guess your concern is about saving credentials in the store to sessionStorage
. Storing tokens should be fine as long as you have robust authentication/validation logic at the backend. Don't store password though.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With