Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. Tobias Mesquita
    3. Best
    T
    • Profile
    • Following
    • Followers
    • Topics
    • Posts
    • Best
    • Groups

    Best posts made by Tobias Mesquita

    • RE: How to make vuex store persist

      folami, there isn’t hard to make vuex-persistedstate to work in a SSR application, but first u need to understand a couple of things.

      1 - LocalStorage and Session Storage isn’t avaliable at server-side, since it’s running on NodeJS.

      So if u are persisting u stores in a WebStorage, so u need to ensure than that will happen only on the client-side, boot files can help u to do that.

      quasar new boot persist-client
      

      quasar.config.js

      boot: [
        ...,
        { path: 'persist-client', server: false }
      ]
      

      boot/persist-client.js

      import createPersistedState from 'vuex-persistedstate'
      
      export default async ({ app, router, store, Vue }) => {
        // window.setTimeout is needed to ensure than data will be rehydrated in the client-side, i know, that is ugly and don't make sense.
        window.setTimeout(() => {
          createPersistedState({
            paths: [...]
          })(store)
        }, 0)
      }
      

      but remember, that states will not be available at server-side, so try not persist data who will be needed in your server-side while booting or preFetching your pages.

      2 - So, what i can to do with sensitive data like jwt tokens? who need to be stored in the client and the server needs that.

      In that case u can persist you state in a Cookie, but remember, u can’t store alot of data inside a cookie, and that will be send to the server in each request.

      quasar new boot persist-auth
      

      quasar.config.js

      boot: [
        ...,
        'persist-auth'
      ]
      

      boot/persist-auth.js

      import { Cookies } from 'quasar'
      import createPersistedState from 'vuex-persistedstate'
      
      export default async ({ app, router, store, Vue }) => {
        const cookies = process.env.SERVER
          ? Cookies.parseSSR(ssrContext)
          : Cookies
      
        createPersistedState({
            paths: [...],
            storage: {
              getItem: key => JSON.stringify(cookies.get(key)),
              setItem: (key, value) => cookies.set(key, value),
              removeItem: key => cookies.remove(key)
            }
        })(store)
      }
      
      posted in [v1] App Extensions
      T
      Tobias Mesquita
    • RE: Persistence Auth with SSR

      Regarding the firebase, i really don’t know, since them is completely out of of knowledge.

      But u can use the QCookies to share data between the client and server.

      https://quasar.dev/quasar-plugins/cookies#Note-about-SSR

      However, you aren’t able to read cookies from another domain, so you can’t read cookies of a third party api, like firebase.

      If u wanna to share a vuex module, you would use vuex-persistedstate, here a example.:

      import { Cookies } from 'quasar'
      import createPersistedState from 'vuex-persistedstate'
      
      export default function ({ store, ssrContext }) {
        const cookies = process.env.SERVER
          ? Cookies.parseSSR(ssrContext)
          : Cookies
      
        createPersistedState({
          paths: ['shared'],
          filter ({ type }) {
            return type.startsWith('shared')
          },
          storage: {
            getItem (key) {
              return JSON.stringify(cookies.get(key))
            },
            setItem (key, value) {
              cookies.set(key, value)
            },
            removeItem (key) {
              cookies.remove(key)
            }
          }
        })(store)
      }
      

      But remember, cookies are very limited, so be very selective about what you’ll persist.

      posted in Help
      T
      Tobias Mesquita