[英]React JS how to pass values between pages using session storage
我有一个反应JS登录页面,接受用户名和密码。 输入用户名和密码后,将根据json(API)文件处理凭据,该文件为客户端生成令牌。 我的目标是在客户端登录后将令牌传递到登录页面,并使用客户端相应的数据填充下拉列表。 我面临的问题是让客户端令牌从我的登录页面传递到登录页面。
在我的登录页面中,我使用Fetch从API检索令牌,然后使用会话存储存储令牌。 获取令牌的代码段:
componentDidMount() {
this.fetchData();
}
//request the token
fetchData() {
return fetch('http://myapiaut:1111/api/auth', {
method: 'POST',
headers: {
'Content-type': 'application/json',
},
body: JSON.stringify({
username: 'myAdminusername',
password: 'myAdminPassword',
Authorization: 'myAdminPassword',
})
}) /*end fetch */
.then(results => results.json())
.then(data => {
this.setState({ data: data })
sessionStorage.setItem("token", data)
})
}
//authenticate request
requestUserInfo() {
var token = sessionStorage.getItem("token");
return fetch('http://myapiaut:1111/api/auth', {
method: 'GET',
headers: new Headers({
Authorization: 'Bearer' + sessionStorage.token
}),
})
.then((response) => response.json());
}
登陆页面
componentDidMount() {
fetch('http://myapiclients:22222/api/clients', {
method: 'GET',
headers: {
'Content-type': 'application/json',
'Authorization': 'Bearer ' + sessionStorage.token
},
})
.then(results => results.json())
.then(data => this.setState({ data: data }))
}
...回到登录页面,我确认我通过fetchData函数获取令牌, 但我遇到的问题是正确存储令牌以便它可以传递到登录页面 。
仅供参考 - 当我手动将生成的令牌复制到Fetch的Authorization部分时,我已经构建了登录页面并且它正常运行。 ......可能,我能得到一些关于我做错了什么的帮助吗?
问题出在这里:
.then(data => this.setState({ data: data })) .then(data => sessionStorage.setItem('token', data))
setState
没有解析Promise
所以它没有then()
将其更改为:
.then(data => {
this.setState({ data: data })
sessionStorage.setItem('token', data)
})
在着陆页中:
componentDidMount() { fetch('http://myapiclients/api/clients', { method: 'GET', headers: { 'Content-type': 'application/json', 'Authorization': 'Bearer ${token}' // token is not defined! }, }) .then(results => results.json()) .then(data => this.setState({ data: data })) }
令牌未定义,因此它将是'Bearer undefined',或者在使用sessionStorage.getItem("token")
fetch(...)
之前定义它,或者在fetch headers中执行以下操作:
'Authorization': 'Bearer ' + sessionStorage.token
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.