[英]Login page verification in reactjs
I want to translate an angularjs login page to reactjs.我想将 angularjs 登录页面转换为 reactjs。 I did the code but I want to know if it's the right way to do it and if it's correct till what I have done.
我做了代码,但我想知道这是否是正确的方法,以及在我完成之前它是否正确。 Also I want to add the dashboard page which can be accessed only authentication and user will be redirected to dashboard after login.
另外我想添加只能通过身份验证访问的仪表板页面,用户登录后将被重定向到仪表板。
$scope.login=function(){
$scope.newuser={
'password':$scope.signinpassword,
'email':$scope.emailid
}
return $http.post('/api/authenticate',$scope.newuser).then(function(response,status){
if(response.data=='redirect'){
$window.location.href="/dashboard";
}else if(response.data=='verifyemail'){
angular.element(document.querySelector('#verifyemailbtn')).click();
}else if(response.data=='Invalid Password'){
window.alert("Incorrect Password");
$scope.error='Failed to authenticate'
}
});
}
my reactjs code that I translated so far我到目前为止翻译的 reactjs 代码
class Login extends Component {
constructor(props){
super(props);
this.state={
emailid:'',
password:''
}
}
performLogin = async (event) => {
var body={
"emailid":"this.state.emailid",
"password":"this.state.password"
}
const options = {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json"
},
body: body
};
const url = "api/login";
try {
const response = await fetch(url, options);
const result = await response.json();
console.log(`login successful`);
} catch (error) {
console.error("login credentials wrong");
}
};
render() {
return (
<div>
<input type="text"
placeholder="emailid"
onChange = {(event,newValue) => this.setState({emailid:newValue})}
/>
<br/>
<input
type="password"
placeholder="Enter your Password"
onChange = {(event,newValue) => this.setState({password:newValue})}
/>
<br/>
<button type="submit" onClick={(event) => this.performLogin(event)}/>
</div>
);
}
}
export default Login;
your code approaching is ok but have some syntax issues.您的代码接近没问题,但有一些语法问题。
1- your need to bind "this" for methods in constructor 1-您需要为构造函数中的方法绑定“this”
2- remove double quotation in performLogin for this.state.emailid 2- 在此.state.emailid 的 performLogin 中删除双引号
3- you don't need many functions for each input you can just handle all input feilds just with one function like so. 3-您不需要为每个输入提供很多功能,您只需使用这样的一个功能即可处理所有输入领域。
i refactor your code :-)我重构你的代码:-)
class Login extends Component { constructor(props){ super(props); this.performLogin = this.performLogin.bind(this) this.handleChange = this.handleChange.bind(this) this.state={ emailid:'', password:'' } } performLogin = async (event) => { const { enteredText } = this.state; var body={ "emailid":this.state.emailid, "password":this.state.password } const options = { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: body }; const url = "api/login"; try { const response = await fetch(url, options); const result = await response.json(); $window.location.href="/dashboard"; } catch (error) { console.error("login credentials wrong"); } }; handleChange(e) { this.setState({[e.target.name]:e.target.value}) } render() { return ( <div> <input type="text" placeholder="emailid" onChange = {handleChange} /> <br/> <input type="password" placeholder="Enter your Password" onChange = {handleChange} /> <br/> <button type="submit" onClick={this.performLogin}/> </div> ); } } export default Login;
for redirecting you can use lib like React-Router or just replace console.log( login successful
) with $window.location.href="/dashboard"对于重定向,您可以使用像React-Router 这样的库,或者只是用 $window.location.href="/dashboard" 替换 console.log(
login successful
success )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.