在 React 中将 jwt 令牌添加到 GET 请求不起作用
为了从 API 获取数据,我需要在调用的标头中发送 jwt 令牌。我在应用程序中获取它后将其保存在本地存储中,当我在浏览器的控制台中检查时,我可以看到保存成功 - 当我在那里执行 localStorage.getItem('token') 时,我可以看到它出现在控制台中。但是当我尝试将其添加到我的 API 调用中时,我收到错误 no jwt found。显然,在执行从本地存储获取令牌的逻辑之前,正在执行获取请求。以下是我的代码。任何关于如何解决这个问题的建议都将不胜感激。谢谢!
const url = 'https://url.com';
const token = localStorage.getItem('token');
const AuthStr = 'Bearer '.concat(token);
export default class TestCall extends React.Component {
constructor(props) {
super(props);
this.state = {
error: undefined,
isLoaded: false,
items: [],
};
this.getData = this.getData.bind(this);
}
componentDidMount() {
this.getData();
}
getData () {
return fetch(url, {
method: 'GET',
headers:{
Accept: 'application/json',
'Content-Type': 'application/json',
},
Authorization: "Bearer " + AuthStr,
})
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const { error, isLoaded, items } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<p>{items} </p>
);
}
}
更新:
根据我收到的答案,我将顶部的代码更改为:
const token = localStorage.getItem('token');
我删除了 const AuthStr。 所以我现在的获取请求是:
headers:{
Accept: 'application/json',
'Content-Type': 'application/json',
},
Authorization: "Bearer " + token,
})
这应该已经修复了拼写错误,但我得到的回应仍然是没有找到 jwt。
似乎在初始化 const
AuthStr
时,您已经向其中添加了
Bearer
字符串:
const AuthStr = 'Bearer '.concat(token);
。
然后,在设置请求时,您再次执行此操作:
Authorization: "Bearer " + AuthStr
。
因此,您实际发送的内容如下所示:
Bearer Bearer your token
。
您是否尝试过在
getData()
函数或
componentDidMount()
中实例化
AuthStr
参数?
感谢 @Yoav 尝试帮助我使其工作!
但是,问题似乎出在别处 - 我没有在获取请求中的正确位置添加令牌。
有效的代码是:
getData(){
let auth = localStorage.getItem('user_token');
return fetch(url, {
method: 'GET',
headers:{
Accept: 'application/json',
'Content-Type': 'application/json',
'Authorization': "Bearer " + auth,
},
})
.then(res => res.json())
我甚至可以在执行获取之前在函数中定义 auth 变量并获取令牌 - 在 componentdidmount 中调用它也可以,但这不是主要问题。
对于其他任何处理此问题的人,请注意您将令牌放在请求中的哪个位置!