Nuxt middleware does not update vuex-persistedstate in cookies

[jornwildenbeest]

• vuex-persistedstate version: 4.0.0-beta.3
• node version: v12.18.3
• npm (or yarn) version: 1.22.10

What you did:

I was working on a Nuxt website with JWT Authentication, so I created a middleware in Nuxt to check if the jwtExpiresAt time was in the past, to know when to refresh the JWT token.

What happened:

While I was working on the middleware I tried to update the new refreshed JWT token in the store with a store action. I discoverd that when you use await store.dispatch('auth/login') the session is not being updated.. Turn's out is does update over client side, but when the middleware is called over SSR, say the first page load after hitting command + r or ctrl f5 is does not.

My middleware auth.js:

export default async function ({ app, error, store, redirect, route }) {
  // eslint-disable-next-line no-console
  console.log('AUTH MIDDLEWARE')
  // eslint-disable-next-line no-console

  // eslint-disable-next-line no-console
  console.log(store.getters['auth/isAuthenticated'])
  await store.dispatch('auth/login')
  // eslint-disable-next-line no-console
  console.log(store.getters['auth/isAuthenticated'])

  if (store.getters['auth/isAuthenticated']) {
    // eslint-disable-next-line no-console
    console.log('IS AUTHENTICATED')
  } else {
    // eslint-disable-next-line no-console
    console.log('IS NOT AUTHENTICATED')
  }
}

Don't forget to add the middleware in nuxt.config.js --> router:

router: {
    prefetchLinks: true,
    trailingSlash: !isDev,
    linkPrefetchedClass: 'nuxt-link-prefetched',
    middleware: 'auth'
  }

my store auth.js:

export const state = () => ({
  isLoggedIn: false
})

export const mutations = {
  login (state, { isLoggedIn }) {
    state.isLoggedIn = isLoggedIn
  }
}

export const actions = {
  login ({ state, commit, dispatch, getters }) {
    commit('login', { isLoggedIn: true })
  },
  logout ({ state, commit, dispatch, getters }) {
    commit('login', { isLoggedIn: false })
  }
}

export const getters = {
  // determine if the user is authenticated based on the presence of the access token
  isAuthenticated: (state) => {
    return state.isLoggedIn
  }
}

middleware logs from console:

AUTH MIDDLEWARE                                                                                                                                                                22:06:33
false                                                                                                                                                                          22:06:33
true                                                                                                                                                                           22:06:33
IS AUTHENTICATED

Actual session:

Reproduction sandbox:

I created a brand new testing repo to double check if I wasn't causing the issues by some of my code: https://github.com/jornwildenbeest/nuxt-vuex-persistedstate-test

Problem description:

Javascript session is not being updated when calling store action from nuxt middleware over SSR. Turn's out is does update over client side, but when the middleware is called over SSR, say the first page load after hitting command + r or ctrl f5 is does not.

[derHodrig]

In my store, I have tickets, which are not fetched from the backend (since it's WIP). They are loaded from a file. No problems.

ATM if I fetch products or the user from the backend the cookie does not get updated. Even the tickets are not saved anymore...

Im using Nuxt 2.15.XX with SSR enabled and "vuex-persistedstate": "^4.0.0-beta.3" "js-cookie": "^2.2.1",

[robinvdvleuten]

This does not look like a bug with the plugin but with your application. Please ask for help on either StackOverflow or any Nuxt / Vue related forums.