Vue.js 2, Laravel 5.4, Passport, axios - API 'GET' Problems

Question

I'm tying to get an API working with Vue.JS 2 and Laravel 5.4. In my App.vue I have the following code:

export default {
  name: 'app',
  components: {
    Hello
  },
  created () {
    const postData = {
      grant_type: 'password',
      client_id: 2,
      client_secret: 'somesecret',
      username: 'my@mail.com',
      password: 'password',
      scope: ''
      }
      this.$http.post('http://localhost:8000/oauth/token', postData)
        .then(response => {
           console.log(response)
           const header = {
             'Accept': 'application/json',
             'Authorization': 'Bearer ' + response.body.access_token
           }
           this.$http.get('http://localhost:8000/api/test', {headers: header})
             .then(response => {
               console.log(response)
             })
        })
   }
}

While 'POST' is working without any problems, I just can't get 'GET' working.

My console.log shows the following:

Uncaught (in promise) TypeError: Cannot read property 'access_token' 
of undefined at eval (eval at <anonymous> (app.js:810), <anonymous>:33:51)
(anonymous) @ App.vue?86c0:29

Unfortunately I couldn't find any explanation why this might be happening. Does anybody know if they changed 'access_token' to something else or why this is happening?

Hope someone knows :|

Thanks in advance!

Paul

Answer 1

This is off the top of my head. But i'm sure if you are using axios as your XHR client your response body is under the 'data' parameter and not 'body'.

In summary your reference to access_token would be

'Authorization': 'Bearer ' + response.data.access_token