[609] Cannot commit to vuex store on ssr

Hello,

Am trying to get Nuxt.js working with Feathers.JS, specifically authentication. But am having troubles with commiting data to the vuex store when the page is rendered by the server.

I use the following middleware on a couple of pages:

import { app } from '~/store'
import { getUser } from '~/utils/auth'

export default function ({ isServer, store, route, redirect, req }) {
	getUser(req).then((data) => {
		return app.service('users').get(data.userId)
	}).then((user) => {
		app.set('user', user)
		store.commit('SET_USER', user)
	}).catch((e) => {
		console.log('Error checking auth:' + e)
		if(route.name !== 'auth-login') {
			return redirect('/auth/login')
		}
	})

}

This middleware uses ~/utils/auth.js

import cookie from 'js-cookie'
import { app } from '~/store'
const jwtName = 'feathers-jwt'

const getQueryParams = () => {
  const params = {}
  window.location.href.replace(/([^(?|#)=&]+)(=([^&]*))?/g, ($0, $1, $2, $3) => {
    params[$1] = $3
  })
  return params
}

const getUserFromcookie = (req) => {
    if (!req.headers.cookie) {
      return Promise.reject();
    }

    const jwtcookie = req.headers.cookie.split(';').find(c => c.trim().startsWith(jwtName + '='))

    if(!jwtcookie) {
      return Promise.reject();
    }

    const jwt = jwtcookie.split('=')[1];

    return app.passport.verifyJWT(jwt).then((data) => {
      return Promise.resolve(app.authenticate({ strategy: 'jwt', accessToken: jwt}));
    }).catch((e) => {
      return Promise.reject(e)
    })
}

const getUserFromLocalStorage = () => {
    const token = window.localStorage[jwtName]

    if(! token) {
     return Promise.reject()
    }

    return app.passport.verifyJWT(token).then((data) => {
      return Promise.resolve(app.authenticate({ strategy: 'jwt', accessToken: token}));
    }).catch((e) => {
      return Promise.reject(e)
    })
}

export const getUser = (req) => {
  return process.SERVER_BUILD ? getUserFromcookie(req) : getUserFromLocalStorage();
}

export const storageFeathers = {
  getItem(key) {
      if (process.SERVER_BUILD) return
      window.localStorage.getItem(key)
      cookie.get(key)
  },
  setItem(key, value) {
    if (process.SERVER_BUILD) return
      window.localStorage.setItem(key, value)
      cookie.set(key, value)
  },
  removeItem(key) {
    if (process.SERVER_BUILD) return
      window.localStorage.removeItem(key)
      cookie.remove(key)
  },
  key(index) {

  },
  clear() {

  }
}

and ~/store/index.js

import feathers from 'feathers/client'
import rest from 'feathers-rest/client'
import hooks from 'feathers-hooks'
import socketio from 'feathers-socketio/client'
import io from 'socket.io-client'
import auth from 'feathers-authentication-client'
import localStorage from 'localstorage-memory'
import { storageFeathers } from '~/utils/auth'

const socket = io('http://localhost:3030');

export const app = feathers().configure(hooks())
      .configure(socketio(socket))
      .configure(auth({ storage: storageFeathers }))

export const state = {
  authUser: null
}

export const mutations = {
  SET_USER(state, user) {
    state.authUser = user
  },
  CLEAR_USER(state) {
    state.authUser = null
  }
}

export const actions = {
  nuxtServerInit ({ commit }, { req }) {
    if (req.session && req.session.authUser) {
      commit('SET_USER', req.session.authUser)
    }
  },
  login ({ commit }, { email, password }) {
    return app.authenticate({ strategy: 'local',
                              'email': email,
                              'password': password
                             }).then(response => {
                                  return app.passport.verifyJWT(response.accessToken);
                                })
                                .then(payload => {
                                  return app.service('users').get(payload.userId);
                                })
                                .then(user => {
                                  app.set('user', user);
                                  commit('SET_USER', user);
                                })
                                .catch((error) => {
                                  console.error('Error authenticating!', error);
                                });
  },

  logout ({ commit }) {
    app.logout()
    commit('CLEAR_USER')
    storageFeathers.removeItem('feathers-jwt')
  }

}

On the checkAuth middleware however, for some reason store.commit('SET_USER', user) doesn't work. Is this a bug with nuxt.js?

Sounds similar to: https://github.com/nuxt/nuxt.js/issues/561

Best Regards, David