登录页面实现账号密码正确之后才进行页面的跳转

前言

实现登录页面时，大多由这样一个需求：用户输入账号密码后，需要先判断账号密码是否不为空；如果不为空的话，就判断账号密码是否正确；如果都没有问题的话才进行页面的跳转。现在我利用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);
    });

效果图：

1. 账号密码没输入时由错误提示
   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:**推荐一些我用到的网站

1. react-bootstrap:https://react-bootstrap.github.io/components/alerts/
2. express进行登录验证的实例（有源代码）：https://juejin.im/post/5a5961cc6fb9a01c9c1ef8a2