React JS - 如何通过 fetch 语句验证凭据

Question

我的目标是创建一个运行 json Rest 服务的 React JS 登录页面。在 Postman 中，当我输入服务的 URL 时，将其设置为作为 POST 运行，并在正文中输入以下 JSON： {用户名： "我的用户名"， 密码： "我的密码"} ...返回令牌。所以在我的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);

如何开始获取表单以对各种用户进行身份验证？基本上，我试图让我的页面接受用户名和密码，如果两者匹配，然后将用户路由到登录页面。

Answer 1

不要将授权令牌放在正文中。把它放在标题中。第一个函数将传入用户名、密码和身份验证类型(即grant_type=password(。然后我的第二个函数将使用它来验证请求。不再需要传递任何用户信息，因为我的 api 根据传入的令牌知道谁在请求。OAuth 2.0 的当前文档在这里，您可以在 Mozilla 的 fetch 文档中找到有关将标头与 fetch 一起使用的更多信息。

// 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());
}

我还建议：

1. 从 thunk 或传奇中调用 fetch，但这超出了问题的范围。

2. 无需将您的令牌放在隐藏字段中。顺便说一句，这仍然可以访问。只需将其保持在状态即可。您还可以采取其他措施来稍微保护它，但这也超出了问题的范围。