给 Form 表单绑定 onSubmit 事件，handleSubmit。在这个事件中，需要先使用 event.preventDefault() 阻止事件的默认行为。如果想要获取表单项的输入数据，可以使用 form.getFieldsValue()。但是，在提交表单前需要对表单数据进行预校验，使用 this.props.form.validateFields 进行预校验，validateFields 可以获取所有表单字段的值，并且可以判断表单数据是否有错。如有 没错，说明预校验通过，从 values 中获取 username 和 password 的值，然后通过 reqLogin 这个接口结合 async 和 await 发起登录请求。如果响应的状态码正确，说明登录成功，保存 user，保存在内存和本地中，然后使用 this.props.history.replace 跳转到主管理界面中，反之则登录失败。在 render 中，如果用户已经登陆, 需要使用 Redirect 自动跳转到主管理界面中，代码如下所示：
handleSubmit = (event) => { event.preventDefault() this.props.form.validateFields(async (err, values) => { if (!err) { const { username, password } = values const result = await reqLogin(username, password) if (result.status === 0) { message.success('登录成功') const user = result.data memoryUtils.user = user storageUtils.saveUser(user) this.props.history.replace('https://www.jb51.net/') } else { message.error(result.msg) } } else { console.log(err) } })
二、React 结合 Antd 实现登录功能的实现React 结合 Antd 实现登录功能的实现，完整代码如下所示：
login.jsx，代码如下所示：
import React, { Component } from 'react' import { Form, Icon, Input, Button, message } from 'antd' import { Redirect } from 'react-router-dom' import './login.less' import logo from '../../assets/images/logo.png' import { reqLogin } from '../../api' import memoryUtils from '../../utils/memoryUtils' import storageUtils from '../../utils/storageUtils' class Login extends Component { handleSubmit = (event) => { event.preventDefault() this.props.form.validateFields(async (err, values) => { if (!err) { const { username, password } = values const result = await reqLogin(username, password) if (result.status === 0) { message.success('登录成功') const user = result.data memoryUtils.user = user storageUtils.saveUser(user) this.props.history.replace('https://www.jb51.net/') } else { message.error(result.msg) } } else { console.log(err) } }) } validPwd = (rule, value, callback) => { if (!value) { callback('密码必须输入') } else if (value.length < 4) { callback('密码长度不能小于4位') } else if (value.length > 12) { callback('密码长度不能大于12位') } else if (!/^[a-zA-Z0-9_]+$/.test(value)) { callback('密码必须是英文、数字或下划线组成') } else { callback() } } render () { const user = memoryUtils.user if (user && user._id) { return <Redirect to="https://www.jb51.net/"></Redirect> } const form = this.props.form const { getFieldDecorator } = form return ( <div className="login"> <header className="login-header"> <img src=https://www.jb51.net/article/{logo} alt="logo"></img> <h1>React 后台管理系统</h1> </header> <section className="login-content"> <h2>用户登录</h2> <Form onSubmit={this.handleSubmit}> <Form.Item> { getFieldDecorator('username', { rules: [ { required: true, whitespace: true, message: '用户名必须输入'}, { min: 4, message: '用户名至少是4位'}, { max: 12, message: '用户名至少是12位'}, { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须是英文、数字或下划线组成'} ], // initialValue: 'admin', })( <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="用户名" /> ) } </Form.Item> <Form.Item> { getFieldDecorator('password', { rules: [ { validator: this.validPwd } ] })( <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" /> ) } </Form.Item> <Form.Item> <Button type="primary" htmlType="submit" className="login-form-button"> 登陆 </Button> </Form.Item> </Form> </section> </div> ) } } const WrapLogin = Form.create()(Login) export default WrapLogin
login.less，代码如下所示：