登录页面实现账号密码正确之后才进行页面的跳转
前言
实现登录页面时,大多由这样一个需求:用户输入账号密码后,需要先判断账号密码是否不为空;如果不为空的话,就判断账号密码是否正确;如果都没有问题的话才进行页面的跳转。现在我利用react+react-bootstrap+jquery来实现这一功能
实现
代码展示
客户端代码:
import React from 'react';
import ReactDom from 'react-dom';
import { Form, Row, Col, InputGroup, Button, Modal} from 'react-bootstrap';
import './login.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../src/resource/icons/fontawesome-free-5.13.0-web/css/all.css';
import $ from 'jquery';
class Login extends React.Component {
constructor(props){
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.registerUser = this.registerUser.bind(this);
this.state = {validated: false, show: false};
}
componentDidMount(){
}
handleSubmit(event){
const formElement = event.currentTarget;//获得表单元素
event.preventDefault(); //阻止表单提交的默认行为,因为我想由我控制不想要默认的行为
event.stopPropagation(); //阻止事件继续传播
if (formElement.checkValidity() === false) { //如果表单的必要条件不满足:此处指的是账号或密码为空
this.setState({validated: true}); //显示账号密码处的错误提示
}
else{
let usernameVal = formElement.elements.username.value; //获取输入的账号
let passwordVal = formElement.elements.password.value; //获得输入的密码
//如果账号密码都不为空,那就验证账号密码是否为空,post就是跟服务器确认账号密码是否正确
$.post('/login',{username: usernameVal ,password: passwordVal}, (data)=>{
//根据返回值进行判断,如果匹配服务器返回1,否则返回0
if(data == "1"){ //如果账号密码正确,服务器发回1
document.getElementById("jumpToIndex").submit(); //跳转到应用界面
console.log("1");
}
else{
console.log("2");
this.setState({show: true}); //显示一个model,提示账号密码错误
//2秒后model隐藏
window.setTimeout(()=>{
this.setState({show: false});
}, 2000);
}
})
}
}
registerUser(){
document.getElementById("jumpToRegister").submit(); //跳转到注册页面
}
render() {
return (
<div id = "login">
<div id = "loginTitle">实验室资产管理系统</div>
<div id = "loginMain">
<Form id = 'jumpToIndex' method="GET" action="/"></Form>
<Form id = 'jumpToRegister' method="GET" action="/registerUser"></Form>
<Form id = "validateForm" noValidate validated={this.state.validated} onSubmit={this.handleSubmit}>
<Col id = "loginFormCol">
<Form.Label id = "loginFormTitle">登录账号</Form.Label>
<InputGroup className = "userName">
<InputGroup.Prepend>
<InputGroup.Text id="userNameIcon"><i className="fas fa-user"></i></InputGroup.Text>
</InputGroup.Prepend>
<Form.Control name="username" type="text" placeholder="Username" required />
<Form.Control.Feedback type="invalid">
Please choose a username.
</Form.Control.Feedback>
</InputGroup>
<InputGroup className = "password">
<InputGroup.Prepend>
<InputGroup.Text id="passwordIcon"><i className="fas fa-lock"></i></InputGroup.Text>
</InputGroup.Prepend>
<Form.Control name="password" type="password" placeholder="password" required />
<Form.Control.Feedback type="invalid">
Please choose a password.
</Form.Control.Feedback>
</InputGroup>
<Row id = "passwordHelp">
<Form.Label id = "registerUser" onClick = {this.registerUser}>注册用户</Form.Label>
<Form.Label id = "forgetPassword"> forget password</Form.Label>
</Row>
<Button id = "loginButton" type="submit">登录</Button>
</Col>
</Form>
<Modal size="sm" show={this.state.show} onHide={() => this.setState({show:false})} animation={false}>
<Modal.Header>
<Modal.Title style={{textAlign: "center"}}>登录</Modal.Title>
</Modal.Header>
<Modal.Body>账号或者密码不正确!</Modal.Body>
</Modal>
</div>
</div>
);
}
}
ReactDom.render(
<Login />,
document.getElementById('root')
)
服务器段代码(express实现的)
/* GET users listing. */
app.get('/login', function(req, res) {
res.render("login"); //向客户端发回login.html页面
return res;
});
// 用户登录
app.post('/login', function(req, res, next) {
//这里没啥好说的,不会的去查express的passport、passport-local中间件
passport.authenticate('local', function(err, user, info) {
console.log("err,user,info", err, user, info);
if (err) {
console.log("1");
return next(err);
}
if (!user) {
//return res.send("用户名不对");
console.log("用户名不对");
res.set('Content-Type','text/plain'); //express默认发送html类型的数据,所以要修改为文本类型
res.send("2");
return res;
}
req.logIn(user, function(err) {
if (err) {
console.log("3");
return next(err);
}
req.session.username = user.username;
res.set('Content-Type','text/plain');
res.send("1");
return res;
});
})(req, res, next);
});
效果图:
- 账号密码没输入时由错误提示
2. 账号密码都已经输入
说明:
1.
<Form id = 'jumpToIndex' method="GET" action="/"></Form>
<Form id = 'jumpToRegister' method="GET" action="/registerUser"></Form>
<Form id = "validateForm" noValidate validated={this.state.validated} onSubmit={this.handleSubmit}>
...
</Form>
这三行代码很重要,前两个Form元素仅用来进行跳转的,第三个是提供账号密码输入的界面的。
$.post('/login',{username: usernameVal ,password: passwordVal}, (data)=>{...}
这行代码是将输入的账号密码传到服务器那进行验证的。
3.服务器端
res.set('Content-Type','text/plain');
res.send("1");
这行代码是服务器发回账号密码确认信息
**tips:**推荐一些我用到的网站
- react-bootstrap: https://react-bootstrap.github.io/components/alerts/
- express进行登录验证的实例(有源代码): https://juejin.im/post/5a5961cc6fb9a01c9c1ef8a2
m0_62077909: 你好,请问下这是相当于不用数据库的情况下,账号密码不写死是嘛?