我正在学习使用JWT进行React JS身份验证的教程,并创建了一个使用JSON API的登录表单,该表单在输入正确的用户名和密码时生成一个令牌。当我单击提交按钮时,我得到一个404错误-未找到(通过Chrome控制台/网络选项卡)。然而,当我通过postman测试API时(在正文中输入用户名和密码(JSON),返回一个令牌)
登录页面从另一个文件中调用一个函数,该函数用于验证用户并获取令牌。我想知道我的fetch语句是否正确设置,这是我所拥有的:
登录方式:
login(username, password) {
// Get a token from api server using the fetch api
return this.fetch(`${this.domain}/login`, {
method: 'POST',
body: JSON.stringify({
username,
password
})
}).then(res => {
this.setToken(res.token) // Setting the token in localStorage
return Promise.resolve(res);
})
}
字符串
...这是我的fetch方法:
fetch(url, options) {
// performs api calls sending the required authentication headers
const headers = {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
// Setting Authorization header
// Authorization: Bearer xxxxxxx.xxxxxxxx.xxxxxx
if (this.loggedIn()) {
headers['Authorization'] = 'Bearer ' + this.getToken()
}
return fetch(url, {
headers,
...options
})
.then(this._checkStatus)
.then(response => response.json())
}
型
下面,我发布了完整代码的URL,如果有帮助的话:
Login https://codepen.io/lkennedy009/pen/GdYOYe?editors=0010#0
AuthService https://codepen.io/lkennedy009/pen/xjyPMY
withAuth https://codepen.io/lkennedy009/pen/bMmYyd?editors=0010#0
型
.我可以得到一些帮助,我做错了什么和/或如果有什么我错过了?
1条答案
按热度按时间cbeh67ev1#
看起来你的fetch设置是可以的,而且你的API使用postman工作,但不是通过你发布的代码调用时,这让我认为
${this.domain}/login/
没有产生你期望的输出。我注意到你在创建AuthService示例时没有提供域,这将导致域回退到
http://theApiUrl:11111/api/auth
。我会在fetch方法中放置一些console.log语句,看看url被提供为什么值。