Middleware executing before Vuex Store restore from localstorage

Question

In nuxtjs project, I created an auth middleware to protect page. and using vuex-persistedstate (also tried vuex-persist and nuxt-vuex-persist) to persist vuex store.

Everything is working fine when navigating from page to page, but when i refresh page or directly land to protected route, it redirect me to login page.

localStorage plugin

import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState({
      key: 'store-key'
  })(store)
}

auth middleware

export default function ({ req, store, redirect, route }) {
    const userIsLoggedIn = !!store.state.auth.user
    if (!userIsLoggedIn) {
        return redirect(`/auth/login?redirect=${route.fullPath}`)
    }
    return Promise.resolve()
}

@SeanRussell I fail in solving the issue, but found a bypass to this by creating a redirect page. In my case store data was located at localstorage of client side. So whenever we perform refresh, server try to locate the store data on server, thats by it. So i create a redirect page. and change the above function accordingly. Mail me at [email protected] for code. — auedbaki

Elijah Kolawole Elijah Kolawole · Accepted Answer · 2020-12-28T12:57:37

I solved this problem by using this plugin vuex-persistedstate instead of the vuex-persist plugin. It seems there's some bug (or probably design architecture) in vuex-persist that's causing it.

Middleware executing before Vuex Store restore from localstorage

1 Answers