我的目标是创建一个运行JSON Rest服务的React JS登录页面。在邮递员中,当我输入服务的URL时,将其设置为以POST身份运行,然后在正文中输入以下JSON:{username:“ myUserName”,密码:“ 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的网站上找到有关使用标头与fetch的更多信息。获取文档。
grant_type=password
// 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,但这超出了问题的范围。
无需将令牌放在隐藏字段中。顺便说一句,仍然可以访问。只需保持其状态即可。您可以采取其他一些措施来保护它,但是这也不在问题范围之内。