javascript - React JS - 如何通过 fetch 语句验证凭据
问题描述
我的目标是创建一个运行 json Rest 服务的 React JS 登录页面。在 Postman 中,当我输入服务的 URL 时,将其设置为以 POST 运行并在正文中输入以下 JSON:{username: "myUserName", password: "myPassword"} ...返回一个令牌。所以在我的 fetch 子句中,我使用 JSON.stringify 将用户名和密码传递给服务器。
我是使用 Fetch 和 react 的新手,所以我的问题是,我如何开始验证各种用户,仅使用 react JS 和 fetch?我假设,我要在我的 Fetch 子句的第二个然后写我的逻辑?
目前,我的页面接受任何凭据,并在单击提交按钮后将用户路由到登录页面。我有一个包含 fetch 的函数,现在在单击 onSubmit 按钮后调用 fetch 函数,该按钮现在获取令牌。
这是我的代码:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './Login.css';
import { withRouter } from 'react-router-dom';
class Login extends Component {
constructor() {
super();
this.state = {
data: [],
username: "",
password: "",
token: "",
};
} //end constructor
componentWillMount() {
}
componentDidMount() {
this.fetchData();
}
fetchData() {
fetch('http://theapi/api/auth', {
method: 'POST',
headers: {
'Content-type': 'application/json',
},
body: JSON.stringify({
username: 'myUserName',
password: 'myPassword',
Authorization: 'TheReturnedToken',
})
}) /*end fetch */
.then(results => results.json())
.then(data => this.setState({ data: data })
)
}
//request the token
requestAccessToken(data) {
const loginInfo = '${data}&grant_type=password';
return fetch('${API_URL}Token', {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/json',
}),
body: loginInfo,
})
.then((response) => response.json());
}
//authenticate request
requestUserInfo(token) {
return fetch('${API_URL}api/participant/userinfo', {
method: 'GET',
headers: new Headers({
Authorization: 'Bearer ${token}',
}),
})
.then((response) => response.json());
}
change = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}; //end change
onSubmit = (e) =>{
this.fetchData();
e.preventDefault();
//console.log(this.state);
this.setState({
username: "",
password: "",
});
this.props.history.push('/landing');
};
render() {
console.log(this.state.data);
return (
<div>
<div className="loginContainer">
<h2>Member Login</h2>
<form>
<input
id="username"
name="username"
placeholder="User Name"
value={this.state.username}
onChange={e => this.change(e) }
className="form-control"
/> <br />
<input
id="password"
name="password"
type="password"
placeholder="Password"
value={this.state.password}
onChange={e => this.change(e) }
className="form-control"
/> <br />
<button onClick={e => this.onSubmit(e)} className="btn btn-primary">Submit</button>
</form>
</div>
</div>
);
}
}
export default withRouter(Login);
如何开始让我的表单对各种用户进行身份验证?基本上,我试图让我的页面接受用户名和密码,如果两者匹配,然后将用户路由到登录页面。
解决方案
不要将您的授权令牌放在正文中。把它放在页眉中。第一个函数将传入用户名、密码和身份验证类型(即grant_type=password
)。然后我的第二个函数将使用它来验证请求。不再需要传递任何用户信息,因为我的 api 根据传入的令牌知道谁在请求。OAuth 2.0 的当前文档在这里,您可以在 Mozilla 的获取文档。
// request the token
// subscribe to this event and use the returned json to save your token to state or session storage
export function requestAccessToken(data) {
const loginInfo = `${data}&grant_type=password`;
return fetch(`${API_URL}Token`, {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded',
}),
body: loginInfo,
})
.then((response) => response.json());
// in your case set state to returned token
}
// use said token to authenticate request
export function requestUserInfo(token) {
return fetch(`${API_URL}api/participant/userinfo`, {
method: 'GET',
headers: new Headers({
Authorization: `Bearer ${token}`,
}),
})
.then((response) => response.json());
}
我还建议:
从 thunk 或 saga 调用 fetch ,但这超出了问题的范围。
无需将您的令牌放在隐藏字段中。顺便说一句,这仍然可以访问。只需保持状态即可。您还可以做一些其他的事情来保护它,但这也超出了问题的范围。
推荐阅读
- php - 如何从 Laravel 的指定日期知道周数?
- c# - 实体框架核心api保存一对多关系数据
- sql - 在第一个最高分之后找到最低分
- asp.net-core - 未针对在 IIS 上运行的 ASP.net Core 应用程序更新环境变量
- android - TextInputEditText 提示被框轮廓覆盖
- c++ - 从具有特定列索引c ++的另一个矩阵中提取矩阵
- android - 缩小我的应用程序剥离基本类
- kubernetes - playbook 中的 delegate_to 存在问题,调用角色仅在列表中的一个主机上运行
- python - 更新包后我无法导入 tensorflow
- elasticsearch - 你能说出使用 Kibana 存储多长时间的日志吗?