CODEWITHSUNDEEP
javascriptvue.jsvue-resource
xaos_xv
xaos_xv

Reputation: 769

Authorization header doesn't work with http GET requests

I'm using VueSession in my project. I created a login component and I'm passing data to my backend (Django, returns JWT token). Here is my problem. My login works fine, it returns JWT but when I want to get data from other endpoints I'm getting error 401 (Authentication credentials were not provided). When I'm using curl in my terminal everything works fine.

curl -X POST -d "username=test&password=test" http://localhost:8000/api/token/auth/ it returns token

curl -H "Authorization: JWT <my_token>" http://localhost:8000/protected-url/ and it returns data from website

Here is what I set up in my Vue project.

Login.vue

<script>
import Vue from 'vue'

export default {
  name: 'Login',
  data () {
    return {
      username: '',
      password: ''
    }
  },

  methods: {
    login: function (username, password) {
      let user_obj = {
        "username": username,
        "password": password
      }
      this.$http.post('http://192.168.1.151:8000/api/token/auth', user_obj)
      .then((response) => {
        console.log(response.data)
        this.$session.start()
        this.$session.set('jwt', response.data.token)
        Vue.http.headers.common['Authorization'] = 'JWT' + response.data.token

        // this.$router.push('/')

      })
      .catch((error_data) => {
        console.log(error_data)
      })
    }
  }
}
</script>

HereIWantUserGETRequest.vue

<script>
export default {
  data() {
    return {
      msg: "Welcome",
      my_list: []
    }
  },
  beforeCreate() {
    // IF SESSION DOESN'T EXIST
    if (!this.$session.exists()) {
      this.$router.push('/account/login')
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData: function() {
      this.$http.get('http://192.168.1.151:8000/api/user/data')
        .then((response) => {
          console.log(response.data)
          this.my_list = response.data
        })
        .catch((error_data) => {
          console.log(error_data)
        })
    }
  }
}
</script>

And of course I set up VueSession and VueResource in main.js

import VueSession from 'vue-session'
import VueResource from 'vue-resource'

Vue.use(VueResource)
Vue.use(VueSession)

Upvotes: 0

Views: 1419

Answers (3)

xaos_xv
xaos_xv

Reputation: 769

The problem was with this line Vue.http.headers.common['Authorization'] = 'JWT ' + response.data.token. To fix it I needed to at this to my main.js file: 

if (this.$session.exists()) {
      var token = this.$session.get('jwt')
      console.log(token)
      Vue.http.headers.common['Authorization'] = 'JWT ' + token
}

And now it's working.

Upvotes: 0

Patrick Cyiza
Patrick Cyiza

Reputation: 146

You don't actually store your jwt token anywhere in your browser (with a cookie or a localStorage). Therefore Vue has the token in memory only for the runtime of that page (in the sense of a one page app) you've request your jwt token in. According to the github docs of VueSession the option to store the token in your browser is false by default. Just set it to true like this:

#main.js

var options = {
  persist: true
}

Vue.use(VueSession, options)

I personally don't use this library. I usually do it from scratch using axios, Vuex and localStorage. It's really not that difficult, the pattern is described pretty well here.

Upvotes: 0

Alex
Alex

Reputation: 4266

Edit

Vue.http.headers.common['Authorization'] = 'JWT' + response.data.token

with

Vue.http.headers.common['Authorization'] = 'JWT ' + response.data.token

Hope it will help you

Upvotes: 2

Related Questions