在 vue App 中使用带有授权标头的 Axios GET

Question

我正在尝试将 axios 用于带有需要授权标头的 API 的 GET 请求。

这是我当前的代码

我当前的代码：

data () {
return {
listings: [],
AuthStr : 'Bearer ' + JSON.parse(localStorage.getItem('token')),
}
},
created () {
axios.get(`url`, { 'headers': { 'Authorization': AuthStr } })
.then((response => {
this.listings = response.data;
})
.catch((error) => {
console.log(error)
})
}

它向我显示我不知道为什么的 403 错误。

Answer 1

有几种方法可以将标头添加到请求中。

对于单个请求：

let config = {
headers: {
Authorization: value,
}
}

axios.get(URL, config).then(...)

您需要调用data().AuthStr才能获得令牌，那里有一个拼写错误。

您创建的函数将是

created () {
axios.get(`url`, { 'headers': { 'Authorization': data().AuthStr } })
.then((response) => {
this.listings = response.data;
})
.catch((error) => {
console.log(error)
})
}

Answer 2

它应该是：

axios.get(`url`, { 'headers': { 'Authorization': this.AuthStr } })

Answer 3

在获取AuthStr的值时，您使用的是JSON.parse。JSON.parse返回一个对象。尝试删除它，如果您使用的是正确的身份验证令牌，它应该可以工作。