Nuxt.js: Get Authentication by Django POST API

[tagmetag]

How can I get Authentication, Storage Sessions with Django API by POST?
This example https://nuxtjs.org/examples/auth-routes cant help me. It's logged in success but when reload page it not logged in anymore.

Action Store Login

async login ({ commit }, { username, password }) { try { const { data } = await **axios.post('http://localhost:8000/api/v1/api-token-auth/login'**, { username, password }) commit('SET_USER', data) } catch (error) { if (error.response && error.response.status === 401) { throw new Error('Bad credentials') } throw error } },
ServerMiddleware auth.js
router.post('/login', (req, res) => { if (req.body.username && req.body.username == req.body.password) { req.session.authUser = { username } return res.json({ username }) } res.status(401).json({ message: 'Wrong username or Password. Please try again!' }) })

Please help. Thanks in advance

_{This question is available on Nuxt.js community (#c1488)}

[venugopalsundaram]

@congtoanle Can you share the store/index.js file? Have you added nuxtServerInit function properly

[tagmetag]

@venugopalsundaram My Store/Index.js:
`import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

// Polyfill for window.fetch()
require('whatwg-fetch')

const store = () => {
return new Vuex.Store({
state: {
authUser: null
},

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

actions: {

  nuxtServerInit ({ commit }, { req }) {
    if (req.session && req.session.authUser) {
      commit('SET_USER', req.session.authUser)
    }
  },

  async login ({ commit }, { username, password }) {
    try {
      const { data } = await axios.post('http://localhost:8000/api/v1/api-token-auth/login', { username, password })
      commit('SET_USER', data)
      localStorage.setItem('id_token', data.token)
    } catch (error) {
      if (error.response && error.response.status === 401) {
        throw new Error('Bad credentials')
      }
      throw error
    }
  },

  logout ({ commit }) {
    return fetch('/api/logout', {
      // Send the client cookies to the server
      credentials: 'same-origin',
      method: 'POST'
    })
      .then(() => {
        commit('SET_USER', null)
      })
  },

  getAuthHeader () {
    return {
      'Authorization': 'Bearer ' + localStorage.getItem('access_token')
    }
  }

}

})
}

export default store
`

[venugopalsundaram]

Hi @congtoanle ,

while reloading what is the value of the state .You can get it from Vue Devtools.

If state.authUser is null then the issue in store code.

[tagmetag]

@venugopalsundaram
My Vue Devtools:

When I F5 page, it haven't remained logged in anymore.

[venugopalsundaram]

@congtoanle "_When I F5 page, it haven't remained logged in anymore._". After F5 page whether the state value turned into null?

[tagmetag]

Thank you @venugopalsundaram but I was success by using Token.

[tagmetag]

`nuxtServerInit ({ commit }, { req }) {
try {
const jwtCookie = req.headers.cookie.split(';').find(c => c.trim().startsWith('token='))
if (jwtCookie) {
let token = jwtCookie.split('=')[1]
let payload = jwtDecode(token)
let date = Date.now() / 1000
if (payload.exp > date) {
commit('SET_USER', payload)
commit('SET_TOKEN', token)
instance.defaults.baseURL = backendURL
}
}
} catch (error) {
}
},

  async login ({ commit }, { username, password }) {
    try {
      const { data } = await axios.post('http://localhost:8000/api/v1/api-token-auth/login', { username, password })
      let payload = jwtDecode(data.token)
      Cookie.set('token', data.token)
      commit('SET_TOKEN', data.token)
      commit('SET_USER', payload)
      window.location.href = '/'
    } catch (error) {
      if (error.response && error.response.status === 401) {
        throw new Error('Bad credentials')
      }
      throw error
    }
  },`

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.