Whats the correct way to set a middleware (route guard) using vuex-persistedstate and NuxtJS?

[dcruz1990]

• vuex-persistedstate version: 4.0.0-beta.3
• node version: 12.20.0
• npm (or yarn) version: 7.5.4

What you did: Set this config in plugins:

import * as Cookies from 'js-cookie';
import cookie from 'cookie';

export default ({
  store,
  req
}) => {
  createPersistedState({
    // paths: [...],
    storage: {
      getItem: (key) => {
        // See https://nuxtjs.org/guide/plugins/#using-process-flags
        if (process.server) {
          const parsedCookies = cookie.parse(req.headers.cookie);
          return parsedCookies[key];
        } else {
          return Cookies.get(key);
        }
      },
      // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
      setItem: (key, value) =>
        Cookies.set(key, value, {
          expires: 365,
          secure: false
        }),
      removeItem: key => Cookies.remove(key)
    }
  })(store);
};

then configure NuxtJS to use that plugin.

plugins: [{
      src: '~/plugins/persistedState.js'
    }]

Then, define a middleware in middleware project folder:

export default function ({
  store,
  redirect,

}) {
  // If the user is not authenticated
  if (!store.state.isAuthenticated) {
    return redirect('/login')
  }
}

And finally in NuxtPage set:

 middleware: "auth",

What happened: When the user logs in, everything works fine, but when the page is reload via F5, im being returned to login. That isnt suppose to happen because the store remains on isAuthenticated: true

Problem description: VuexPersistedStore doestn works on NuxtJS auth middleware (route guard) when page reloads via F5.

[SeanLuis]

https://auth.nuxtjs.org/ Check this...

In this doc they don't use any plugin to persist the state.

"nuxt.js/examples at dev · nuxt/nuxt.js" https://github.com/nuxt/nuxt.js/tree/dev/examples

[flakobatako]

https://auth.nuxtjs.org/ Check this...

In this doc they don't use any plugin to persist the state.

"nuxt.js/examples at dev · nuxt/nuxt.js" https://github.com/nuxt/nuxt.js/tree/dev/examples

That's not what the OP wants. He already knows how to persist state using nuxt js's middlewares. If you read carefully the "What happened section", what he really wants to achieve is to be able to persist the auth state after the page gets reloaded by pressing F5. And using SSR (by looking at his plugin, which is the same as this: https://github.com/robinvdvleuten/vuex-persistedstate#using-cookies-universal-client--server-side).

[ziadghalleb]

https://auth.nuxtjs.org/ Check this...

In this doc they don't use any plugin to persist the state.

"nuxt.js/examples at dev · nuxt/nuxt.js" https://github.com/nuxt/nuxt.js/tree/dev/examples

Please don't answer when you haven't carefully read the OP's issue. This is completely off-track.

[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.