Vuex store empty if i refresh my webpage

Question

how to keep my store if i refresh a web page ?

    let store = new Vuex.Store( {
    modules: {
        demo, auth
    },
    strict: true
} );


let router = new VueRouter( {
    mode: 'history',
    saveScrollPosition: true,
    routes: routes
} )

I use the history mode but If i reload my webpage, my store is empty. There is a solution ?

Answer 1

To persist state data after app refresh, you can either use localStorage or sessionStorage.

1. XSS: The problems with storing tokens in localStorage as you say is about the app being vulnerable to XSS (cross-site-scripting) attacks. Apart from that, it is quite safe. The localStorage is bound to the domain, so the data of www.yourapp.com will stay there even after the browser is closed also unlike cookies, you won't have to manage which site made the request. All the tabs on the browser with the same domain will be able to use the data in the localStorage

   If the said behaviour is not needed, you can go for sessionStorage, it works almost the same way but the data gets cleared when the browser is closed.

2. Going for cookies, sure they will help saving your token being taken away by an XSS but then you will have to ensure you also provide a csrf-token to protect against CSRF (Cross Site Request Forgery) attacks.

   If you plan on going forward with cookies, then make sure they have the httpOnly flag set to true in the headers, else they are no good.

Overall I have seen that localStorage has been a very commonly recommended solution for maintaining tokens and other app data.

I'll add sources to this answer for reference.

1. CSRF Token necessary when using Stateless(= Sessionless) Authentication? Check the accepted answer and others as well.

2. https://github.com/OWASP/CheatSheetSeries/blob/master/cheatsheets/HTML5_Security_Cheat_Sheet.md

3. https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage

4. https://www.whitehatsec.com/blog/web-storage-security/ This would let you know about the pitfalls and how-to for using localStorage.

Answer 2

1. If you refresh the page (F5) you are re-running your app, so unless you initialize the store with some data, it will get empty as it is when app starts.

2. You can decide what states you want to keep in this case and save them into the cookie/LocalStorage and then in your app.js load them from cookie/LocalStorage into the store. It would be common practice for things like auth token etc as you want to keep user logged in in case of page refresh. Nice post from Stormpath about storing the tokens: https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage

3. If Vuex store and whole app is being reloaded when you are navigating from route to route - there is something wrong with your application, probably you are not using VueRouter navigation properly.

Answer 3

You can cache your state to the sessionStorage, which will survive page(tab) refresh events, but will be cleaned when the page or browser is closed.

Docs about sessionStorage