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

Question

我想得到一个 API 与 Vue.JS 2 和 Laravel 5.4 一起工作。在我的 App.vue 中，我有以下代码：

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)
             })
        })
   }
}

虽然 'POST' 工作没有任何问题，但我无法让 'GET' 工作。

我的 console.log 显示如下：

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

不幸的是，我找不到任何解释为什么会发生这种情况。有人知道他们是否将 'access_token' 更改为其他内容或者为什么会这样吗？

希望有人知道:|

提前致谢！

保罗

Answer 1

这超出了我的想象。但我敢肯定，如果你使用 axios 作为你的 XHR 客户端，你的响应正文在 'data' 参数下，而不是 'body'.

总之，您对 access_token 的引用是

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

Answer 2

你可以参考下面的link或者你可以和下面的git仓库比较

https://github.com/safiahmed4cs/Larave-Passport-with-Vue-Vue-Router-and-axios

有 Laravel 应用程序，Laravel 护照，

还导入了 Axios、Vue Js、Vue Resource 和 Vue Router，

如果您需要更多信息或遇到任何问题，请告诉我。

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

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

laravel

laravel-5

vuejs2

axios

laravel-passport