Nuxt Auth Module Authenticated User Data

Question

I have an API api/auth that is used to log users in. It expects to receive an access_token (as URL query, from Headers, or from request body), a username, and a password. I've been using the Vue Chrome Developer Tool and even though I get a 201 response from the server, the auth.loggedIn state is still false. I think that might be the reason why my redirect paths on the nuxt.config.js isn't working as well. Can anyone point me to the right direction on why it doesn't work?

This is a screenshot of the Vue Chrome Developer Tool

This is the JSON response of the server after logging in. The token here is different from the access_token as noted above.

{
    "token": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    "user": {
        "user_name": "xxxxxxxxxxxxxxxxxx",
        "uid": "xxxxxxxxxxxxxxxxxx",
        "user_data": "XXXXXXXXXXXXXXXXXXXXXXXXX"
    }
}

Here is the relevant part of nuxt.config.js

export default {
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    ['bootstrap-vue/nuxt', { css: false }]
  ],
  router: {
    middleware: [ 'auth' ]
  },
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/api/auth?access_token=XXXXXXXXXXXXXXXXXXXXXX',
            method: 'post',
            propertyName: 'token'
          },
          logout: {
            url: '/api/auth/logout',
            method: 'post'
          },
          user: {
            url: '/api/users/me',
            method: 'get',
            propertyName: 'user'
          }
        }
      }
    },
    redirect: {
      login: '/',
      logout: '/',
      home: '/home'
    },
    token: {
      name: 'token'
    },
    cookie: {
      name: 'token'
    },
    rewriteRedirects: true
  },
  axios: {
    baseURL: 'http://localhost:9000/'
  }
}

And my store/index.js

export const state = () => ({
  authUser: null
})

export const mutations = {
  SET_USER: function (state, user) {
    state.authUser = user
  }
}

export const actions = {
  nuxtServerInit ({ commit }, { req }) {
    if (req.session && req.user) {
      commit('SET_USER', req.user)
    }
  },

  async login ({ commit }, { username, password }) {
    const auth = {
      username: username,
      password: password
    }

    try {
      const { user } = this.$auth.loginWith('local', { auth })
      commit('SET_USER', user)
    } catch (err) {
      console.error(err)
    }
  }
}

The login action in the store is triggered by this method in the page:

export default {
  auth: false,
  methods: {
    async login () {
      try {
        await this.$store.dispatch('login', {
          username: this.form.email,
          password: this.form.password
        })
      } catch (err) {
        this.alert.status = true
        this.alert.type = 'danger'
        this.alert.response = err
      }
    }
  }
}

P.S. I realize I'm explicitly including the access_token in the URL. Currently, I don't know where a master_key or the like can be set in the Nuxt Auth Module.

Irina S. Irina S. · Accepted Answer · 2018-09-13T22:43:05

Try this in your store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = () => new Vuex.Store({
  state: {
    authUser: null
  },
  mutations: {
    SET_USER: function (state, user) {
      state.authUser = user
    }
  },
  actions: {
    CHECK_AUTH: function(token, router) {
      if (token === null) {
        router.push('/login')
      }
    }
  }
})
export default store

And for the router, this should work globally:

$nuxt._router.push('/')

Nuxt Auth Module Authenticated User Data

1 Answers