Install and setup feathers-vuex

helpers/createApiClient.js

@@ -0,0 +1,72 @@
+import feathers from '@feathersjs/feathers'
+import socketio from '@feathersjs/socketio-client'
+import io from 'socket.io-client'
+import authentication from '@feathersjs/authentication-client'
+import urlHelper from '~/helpers/urls'
+import Cookie from 'cookie-universal'
+
+const authKey = 'feathers-jwt'
+let socket
+
+const getSocket = (app) => {
+  if (socket) return socket
+
+  const endpoint = urlHelper.buildEndpointURL(app.$env.API_HOST, { port: app.$env.API_PORT })
+  if (process.env.ENV === 'production') {
+    socket = socketio(io(endpoint), { timeout: 20000 })
+    if (process.server) {
+      setTimeout(() => {
+        // close server connection as content was delivered already after 30 seconds at latest
+        try {
+          socket.close()
+        } catch (err) {
+          console.log(err)
+        }
+      }, 30000)
+    }
+  } else {
+    socket = socketio(io(endpoint))
+  }
+
+  return socket
+}
+
+let createApiClient = ({app, req, res}) => {
+  const cookies = Cookie(req, res)
+  const storageMapping = {
+    getItem: (key) => {
+      const res = cookies.get(key)
+      // console.log(`## STORAGE: getItem(${key})`, res)
+      return res
+    },
+    setItem: (key, value, options) => {
+      const res = cookies.set(key, value, options)
+      // console.log(`## STORAGE: setItem(${key}, ${value}, ${options})`, res)
+      return res
+    },
+    removeItem: (key) => {
+      const res = cookies.remove(key)
+      // console.log(`## STORAGE: removeItem(${key})`, res)
+      return res
+    },
+    clear: () => {
+      const res = cookies.removeAll()
+      if (process.env.NODE_ENV === 'development') {
+        console.log(`## STORAGE: clear()`, res)
+      }
+      return res
+    }
+  }
+
+  let api = feathers()
+    .configure(getSocket(app))
+    .configure(authentication({
+      storage: storageMapping,
+      storageKey: authKey,
+      cookie: authKey
+    }))
+
+  return api
+}
+
+export default createApiClient

nuxt.config.js

@@ -108,6 +108,7 @@ module.exports = {
     {src: '~/plugins/debug.js', ssr: false},
     {src: '~/plugins/raven-client.js', ssr: false},
     {src: '~/plugins/api.js'},
+    {src: '~/plugins/init-feathers-vuex.js'},
     {src: '~/plugins/vue-directives.js', ssr: false},
     {src: '~/plugins/init-store-subscriptions.js', ssr: false},
     {src: '~/plugins/keep-alive.js', ssr: false},

package.json

@@ -69,6 +69,7 @@
     "express-healthcheck": "~0.1.0",
     "express-locale": "~1.0.5",
     "express-session": "~1.15.6",
+    "feathers-vuex": "^1.5.0",
     "font-awesome": "~4.7.0",
     "helmet": "^3.12.1",
     "i18n-iso-countries": "^3.7.8",

plugins/api.js

@@ -1,60 +1,15 @@
-import feathers from '@feathersjs/feathers'
-import socketio from '@feathersjs/socketio-client'
-import io from 'socket.io-client'
-import authentication from '@feathersjs/authentication-client'
-import urlHelper from '~/helpers/urls'
+import feathersVuex from 'feathers-vuex'
 import Vue from 'vue'
+import Vuex from 'vuex'
+import createApiClient from '../helpers/createApiClient'
 
-export default ({app, store, redirect, router}) => {
-  const authKey = 'feathers-jwt'
-  const endpoint = urlHelper.buildEndpointURL(app.$env.API_HOST, { port: app.$env.API_PORT })
-  const storage = {
-    getItem: (key) => {
-      const res = app.$cookies.get(key)
-      // console.log(`## STORAGE: getItem(${key})`, res)
-      return res
-    },
-    setItem: (key, value, options) => {
-      const res = app.$cookies.set(key, value, options)
-      // console.log(`## STORAGE: setItem(${key}, ${value}, ${options})`, res)
-      return res
-    },
-    removeItem: (key) => {
-      const res = app.$cookies.remove(key)
-      // console.log(`## STORAGE: removeItem(${key})`, res)
-      return res
-    },
-    clear: () => {
-      const res = app.$cookies.removeAll()
-      if (app.$env.NODE_ENV === 'development') {
-        console.log(`## STORAGE: clear()`, res)
-      }
-      return res
-    }
-  }
+export default ({app, store, redirect, router, req, res}) => {
+  const api = createApiClient({app, req, res})
+  const { FeathersVuex } = feathersVuex(api, { idField: '_id' })
 
-  const socket = io(endpoint)
+  Vue.use(FeathersVuex)
+  Vue.use(Vuex)
 
-  if (process.server) {
-    setTimeout(() => {
-      // close server connection as content was delivered already after 30 seconds at latest
-      try {
-        socket.close()
-      } catch (err) {
-        app.error(err)
-      }
-    }, 30000)
-  }
-
-  let api = feathers()
-    .configure(socketio(socket, {
-      timeout: 20000
-    }))
-    .configure(authentication({
-      storage: storage,
-      storageKey: authKey,
-      cookie: authKey
-    }))
   api.hooks({
     before: {
       all: [
@@ -73,7 +28,7 @@ export default ({app, store, redirect, router}) => {
       if (app.$env.NODE_ENV === 'development') {
         console.log('####################')
         console.error(ctx.error)
-        console.info('JWT TOKEN: ', app.$cookies.get(authKey))
+        // console.info('JWT TOKEN: ', app.$cookies.get(authKey))
         console.info('path', ctx.path)
         console.info('service', ctx.service)
         console.info('method', ctx.method)
@@ -103,7 +58,6 @@ export default ({app, store, redirect, router}) => {
       // fix issues where we could not log in
       // when at development
       await api.passport.logout()
-      storage.removeItem(authKey)
     }
     let user = null
     const response = await api.authenticate(options)
@@ -120,11 +74,6 @@ export default ({app, store, redirect, router}) => {
     api.channel('authenticated').join(connection)
   })
 
-  /**
-   * @deprecated
-   */
-  api.authKey = authKey
-
   // make the api accessible inside vue components
   Vue.use({
     install (Vue) {

plugins/init-feathers-vuex.js

@@ -0,0 +1,19 @@
+import createApiClient from '../helpers/createApiClient'
+
+const requireModule = require.context(
+  // The relative path holding the service modules
+  '../store/services',
+  // Whether to look in subfolders
+  false,
+  // Only include .js files (prevents duplicate imports)
+  /.js$/
+)
+
+export default async ({app, store, req, res}) => {
+  const feathersClient = createApiClient({app, req, res})
+
+  const servicePlugins = requireModule.keys().map(modulePath => requireModule(modulePath).default(feathersClient))
+  servicePlugins.forEach((servicePlugin) => {
+    servicePlugin(store)
+  })
+}

store/init-feathers-vuex.js

@@ -0,0 +1,13 @@
+import { initAuth } from 'feathers-vuex'
+
+export const actions = {
+  nuxtServerInit ({ commit, dispatch }, { req }) {
+    return initAuth({
+      commit,
+      dispatch,
+      req,
+      moduleName: 'auth',
+      cookieName: 'feathers-jwt'
+    })
+  }
+}

store/services/users.js

@@ -0,0 +1,11 @@
+import feathersVuex from 'feathers-vuex'
+
+let servicePlugin = (feathersClient) => {
+  const { service } = feathersVuex(feathersClient, { idField: '_id' })
+  const servicePath = 'users'
+  const servicePlugin = service(servicePath, {
+    namespace: 'feathers-vuex-users'
+  })
+  return servicePlugin
+}
+export default servicePlugin

store/services/usersettings.js

@@ -0,0 +1,11 @@
+import feathersVuex from 'feathers-vuex'
+
+let servicePlugin = (feathersClient) => {
+  const { service } = feathersVuex(feathersClient, { idField: '_id' })
+  const servicePath = 'usersettings'
+  const servicePlugin = service(servicePath, {
+    namespace: 'feathers-vuex-usersettings'
+  })
+  return servicePlugin
+}
+export default servicePlugin