Feathers-vuex: Persisting state with Nuxt

[tguelcan]

Everything works great, as soon as I refresh the browser, it calls the method
info: after: authentication - Method: remove
and im logged out.
Method: remove is not specified anywhere in the client part. :bow:
And the strange thing is that the payload is still in my storage.

System configuration

I use nuxt with feathers and feathers vuex

"dependencies": {
    "@feathersjs/authentication": "^2.1.2",
    "@feathersjs/authentication-client": "^1.0.2",
    "@feathersjs/authentication-jwt": "^2.0.0",
    "@feathersjs/authentication-local": "^1.1.0",
    "@feathersjs/client": "^3.4.2",
    "@feathersjs/configuration": "^1.0.2",
    "@feathersjs/errors": "^3.3.0",
    "@feathersjs/express": "^1.2.0",
    "@feathersjs/feathers": "^3.1.3",
    "@feathersjs/socketio": "^3.2.0",
    "@feathersjs/socketio-client": "^1.1.0",
    "body-parser": "^1.18.2",
    "bootstrap-vue": "^2.0.0-rc.1",
    "compression": "^1.7.2",
    "cookie-storage": "^3.1.0",
    "cors": "^2.8.4",
    "feathers-authentication-hooks": "^0.1.7",
    "feathers-authentication-management": "^2.0.0",
    "feathers-hooks": "^2.1.2",
    "feathers-hooks-common": "^4.8.0",
    "feathers-mailer": "^3.0.0",
    "feathers-mongoose": "^6.1.0",
    "feathers-vuex": "^1.1.4",
    "helmet": "^3.11.0",
    "js-cookie": "^2.2.0",
    "mongoose": "^5.0.7",
    "nodemailer-smtp-transport": "^2.7.4",
    "normalize.css": "^8.0.0",
    "nuxt": "^1.3.0",
    "pug": "^2.0.0-rc.4",
    "save": "^2.3.2",
    "serve-favicon": "^2.4.5",
    "socket.io-client": "^2.0.4",
    "uws": "^9.14.0",
    "vue-i18n": "^7.4.2",
    "vuex-persistedstate": "^2.4.2",
    "winston": "^2.4.0"
  },

nuxt.config.js

const {
  resolve
} = require('path');
module.exports = {
  srcDir: resolve(__dirname, 'client'),
  dev: process.env.NODE_ENV !== 'production',
  router: {
    middleware: ['auth', 'i18n']
  },
  build: {
    vendor: [
      '@feathersjs/authentication-client',
      '@feathersjs/client',
      '@feathersjs/socketio-client',
      'feathers-hooks',
      'socket.io-client',
      'cookie-storage',
      'feathers-vuex',
      'js-cookie',
      'vuex-persistedstate',
      'vue-i18n'
    ]
  },
  head: {
    titleTemplate: 'Frontend',
    meta: [{
      charset: 'utf-8'
    }, {
      name: 'viewport',
      content: 'width=device-width, initial-scale=1'
    }, {
      hid: 'description',
      name: 'description',
      content: 'Demo App'
    }, ],
  },
  modules: [
    ['bootstrap-vue/nuxt', {
      css: false
    }],
  ],
  plugins: ['~plugins/i18n.js'],
  css: ['@/assets/styles/fonts.scss', '@/assets/styles/icons.scss', '@/assets/styles/main.scss']
};

store/index.js

import Vuex from 'vuex'
import feathersClient from '@/api'
import feathersVuex, {
  initAuth
} from 'feathers-vuex'
const {
  service,
  auth
} = feathersVuex(feathersClient, {
  idField: '_id'
})
const createStore = () => {
  return new Vuex.Store({
    state: {
      locales: ['en', 'de'],
      locale: 'en'
    },
    actions: {
      nuxtServerInit({
        commit,
        dispatch
      }, {
        req
      }) {
        return initAuth({
          commit,
          dispatch,
          req,
          moduleName: 'auth',
          cookieName: 'feathers-jwt'
        })
      }
    },
    mutations: {
      SET_LANG(state, locale) {
        if (state.locales.indexOf(locale) !== -1) {
          state.locale = locale
        }
      }
    },
    plugins: [
      service('users'),
      service('authManagement'),
      auth({
        state: {
          publicPages: ['account-login', 'account-help', 'account-signup', 'account-verify', 'account-intro', 'account-reset']
        },
        userService: 'users'
      })
    ]
  })
}
export default createStore

api/index.js

import feathers from '@feathersjs/feathers';
import socketio from '@feathersjs/socketio-client';
import auth from '@feathersjs/authentication-client'
import io from 'socket.io-client'
import { CookieStorage } from 'cookie-storage';
//.configure(auth({ storage: feathersStorage }))

const socket = io('', { secure: false, transports: ['websocket', 'polling', 'xhr-polling', 'jsonp-polling'] })


const api = feathers()
  .configure(socketio(socket))
  //.configure(auth({ storage: feathersStorage }))
  .configure(auth({ storage: new CookieStorage() }))

export default api

middleware/auth.js

// If it's a private page and there's no payload, redirect.
export default function (context) {
  const { store, redirect, route, params } = context
  const { auth } = store.state

  // Protected
  if (!auth.publicPages.includes(route.name) && !auth.payload) {
    return redirect('/account/login')
  }
}

[marshallswain]

The authentication/remove method is called on the server when you call feathersClient.logout(). Does that help any?

[tguelcan]

You can close this issue. The problem was the Coockie handling via Nuxt on client-side.
https://github.com/feathers-plus/feathers-vuex#authentication-storage-with-nuxt
is not working anymore.

i use persitedstate for this.

import {
  Store
} from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

export default ({
  store,
  isHMR
}) => {
  // In case of HMR, mutation occurs before nuxReady, so previously saved state
  // gets replaced with original state received from server. So, we've to skip HMR.
  // Also nuxtReady event fires for HMR as well, which results multiple registration of
  // vuex-persistedstate plugin
  if (isHMR) return

  window.onNuxtReady((nuxt) => {
    createPersistedState({
      paths: ['counter', 'auth', 'authManagement']
    })(store) // vuex plugins can be connected to store, even after creation
  })
}

[marshallswain]

Ah. Thanks, @tguelcan! I'll try this out and will probably update the docs to recommend that as the solution for Nuxt.

[daenuprobst]

Is the way @tguelcan suggested still the way to do it? If yes, where is the code shown being executed?

[marshallswain]

I'm closing this now that we have a full Nuxt example in the docs. Thanks!

[marshallswain]

Fixed in [email protected]