login.js

import React from 'react'
import './login.less'
import axios from '@src/axios/index'
import Ajax from 'axios'
import SYS_CONFIG from '@src/config/constant.js'
import Utils from '@src/utils/utils'
import storage from '@src/utils/localStorage'
import { withRouter } from 'react-router-dom';
import { API_USER_MANAGE, API_IMG_CODE, API_SYSPARAM_MANAGE } from '@src/Api'
import { Row, Modal, Col, Input, Icon, Form, Button, Checkbox, message } from 'antd'
const FormItem = Form.Item;
class Login extends React.Component {
  state = {
    userInfo: {},
    imgCodeShow: {display: 'none'},
    errorCount: 0,
    allowErrorCount: '', // 允许错误次数
    imgTimeNow: null,
    imgOutNum: 30,

  }

  componentDidMount() {
    //获取验证码
    // this.getImgCode()
    //获取本地登录信息
    this.getUserInfo()
    //获取允许错误次数
    this.getErrorCount();
    // 添加键盘事件监听
    window.addEventListener('keypress', (e) => {
      if (e.which == 13 || e.keyCode == 13) {
        this.submit();
      }
    })

  }
  
  getUserInfo = () => {
    const userInfo = storage.get('userInfo')
    console.log(userInfo);
    
    if (userInfo && Object.keys(userInfo).length > 0) {
      this.setState({ userInfo })
      //判断是否登录，如果已经登录直接跳转到home页面
      if(!userInfo.token=='')
      this.props.history.push({
        pathname: '/home'
      });
    }

  }

  // 获取允许输入错误次数
  getErrorCount = () => {
    axios.ajax({
      url: API_SYSPARAM_MANAGE.getParamKeyValueByKeyName,
      data: {keyName: 'sys.VerificationCode'}
    }).then((res) => {
      this.setState({allowErrorCount: parseInt(res)}, () => {
        // 从缓存读取错误次数
        if (storage.get('errorCount')) {
          let errorCount = storage.get('errorCount');
          if (errorCount >= this.state.allowErrorCount) {
            // 展示验证码
            this.setState({imgCodeShow: {display: 'block'}});
            this.getImgCode();
          }
        }
      });

    });
  }

  //获取验证码
  getImgCode = () => {
    axios.ajax({
      url: API_IMG_CODE.getImgCode
    }).then(res => {
      if (res) {
        this.setState({
          imgCode: res.img,
          img_code: res.img_code
        })
        this.getTimeOut()
      }
    })
  }

  getTimeOut() {
    let now =  Date.parse(new Date())   
    axios.ajax({
      url: API_SYSPARAM_MANAGE.getParamKeyValueByKeyName,
      data: {keyName: 'sys.verificationCodeTermOfValidity'}
    }).then((res) => {
       this.setState({
          imgTimeNow: now,
          imgOutNum: res ? +res : 30
        })
    });

  }
  //校验验证码
  verifyImgCode = (code) => {
    return new Promise((resolve, reject) => {
      let img_code = this.state.img_code
     
      if (code && img_code) {
        Ajax({
          url: API_IMG_CODE.verifyImgCode,
          baseURL: SYS_CONFIG.baseApi,
          method: 'POST',
          headers: { 'Content-Type': 'application/json; charset=UTF-8', },
          data: {
            code,
            key: img_code
          }
        }).then(res => {
          if (res.status === 200) {
            if (res.data.code == 0) {
              resolve(true)
            } else {
             
               
               let now =  Date.parse(new Date());
               const diff = now - this.state.imgTimeNow

               if (diff > this.state.imgOutNum*1000) {
                  message.error('验证码超时')
                  this.getImgCode()
                  return 
               } else {
                  this.getImgCode()
                  resolve(false)
               }

              
            }
          }
        }).catch(err => {
          resolve(false)
          message.error('请求超时,请重试')
        })

      } else {
        resolve(false)
      }
    })
  }


  //过滤空格
  filterSpace = (e, field) => {
    let inputLength = e.target.value.length;
    if (inputLength >= 64) {
      this.showErrorInfo('输入账户名超出了64位字符限制');
      let inputCode = e.target.value.substring(0, 64);
      this.props.form.setFieldsValue({loginName: inputCode});
    }
    let userInfo = this.props.form.getFieldsValue();
    if (e.keyCode == 32 || userInfo[field]) {
      this.props.form.setFieldsValue({ [field]: userInfo[field].replace(/^\s+|\s+$/g, '') })
    }
  }

  //显示错误信息
  showErrorInfo = (tips) => {
    this.setState({
      showError: true,
      tips
    })
  }

  //登录账号验证
  validLoginName = (rule, value, callback) => {
    var reg = /^[0-9a-zA-Z@_.]*$/g
    if (reg.test(value) === false) {
      this.showErrorInfo('请输入数字字母下划线')
      return false;
    }
    callback()
    this.showErrorInfo('')
  }


  submit = () => {
    // 如果记录了第一次出错
    if (storage.get('startTime')) {
      let endTime = new Date();
      // 如果第二次提交时间在第一次出错提交60秒后
      if (endTime.getTime() - new Date(storage.get('startTime')).getTime() >= 60000) {
        // 清空错误次数 清空开始时间
        storage.remove('errorCount');
        storage.remove('startTime');
      } 
    }
    let userInfo = Utils.trim(this.props.form.getFieldsValue());
    this.props.form.validateFields(async (err, values) => {

      if (!userInfo.loginName ||!userInfo.loginName.replace(/^\s+|\s+$/g, '') || userInfo.loginName == null) {
        this.showErrorInfo('请输入账户名')
        return
      } else if (!userInfo.password || userInfo.password == null) {
        this.showErrorInfo('请输入账户密码')

        return
        // 校验验证码
      } else if (this.state.imgCodeShow.display == 'block') {
        if (!userInfo.code || userInfo.code == null) {
          this.showErrorInfo('请输入验证码');
          return
        }
      }
      // } else if (!userInfo.code || userInfo.code == null) {
      //   this.showErrorInfo('请输入验证码')
      //   return
      // }

      //校验验证码
      let flag;
      if (this.state.imgCodeShow.display == 'block') {
        flag = await this.verifyImgCode(userInfo.code)
      } else {
        flag = true;
      }
      if (flag) {
        if (!err) {
          this.setState({
            showError: false,
            tips: ''
          })
          
          Ajax({
            url: API_USER_MANAGE.login,
            baseURL: SYS_CONFIG.baseApi,
            method: 'POST',
            headers: { 'Content-Type': 'application/json; charset=UTF-8', },
            data: {
              loginName: userInfo.loginName,
              password: userInfo.password
            }
          }).then(resp => {
            
            if (resp.status === 200) {
              if (resp.data.code == 0) {
                let res = resp.data.data
                if (userInfo && userInfo.remberUserName) {
                  res = Object.assign(res, { remberUserName: true })
                }
  
                if (userInfo && userInfo.remberPwd) {
                  res = Object.assign(res, { remberPwd: true })
                  res.password = userInfo.password
                }
                storage.set('userInfo', res)
                storage.get('userInfo')
                storage.remove('errorCount');
                storage.remove('startTime');
                this.props.history.push('/home');
              } else {
                // 登录失败
                let errorCount;
                if (storage.get('errorCount')) {
                  // 有错误次数
                  errorCount = storage.get('errorCount') + 1;
                  storage.set('errorCount', errorCount);
                } else {
                  // 记录第一次错误
                  storage.set('errorCount', 1);
                  // 记录第一次错误时间
                  let startTime = new Date();
                  storage.set('startTime',startTime);
                }
                
                if (storage.get('errorCount') >= this.state.allowErrorCount) {
                  // 展示验证码
                  this.getImgCode()
                  this.setState({imgCodeShow:{display: 'block'}});
                } else {
                  // 不展示验证码
                  this.setState({imgCodeShow:{display: 'none'}});
                }
                
                Modal.info({
                  title: '提示',
                  content: resp.data.msg
                })
                console.log(resp.data)
              }
              
            }
          }).catch(err => {
            message.error('请求超时,请重试')
          })

        } else {
          message.error('用户名或密码错误')
          this.getImgCode()
        }

      } else {

        this.getImgCode()
        message.error('验证码错误')
        return
      }


    })
  }


  render() {
    const { tips, showError } = this.state
    const iconStyle = {
      fontSize: 20,
      margin: -5,
      width: 20
    },
      inputStyle = {
        textAlign: 'center'
      },
      rowStyle = {
        marginTop: 10
      },
      { getFieldDecorator } = this.props.form


    return (
      <div >
        <div className="loginBg ">
          {/* <img className="logo_2" src="./assets/images/logo_touming.png" alt="" /> */}
          <img className="logo_2" src={require('../../resource/assets/images/logo_touming.png')} alt="" />
        </div>
        <div className="loginRight">
          <div className="title">保险业务核心系统
            <div className="blueLine"></div>
          </div>
          <div className="userForm" style={{width: '60%'}}>
            <Form layout="inline">
              <Row style={rowStyle} >
                <Col span="16">
                  <FormItem >
                    {
                      getFieldDecorator('loginName', {
                        initialValue: this.state.userInfo.remberUserName ? this.state.userInfo.loginName : '',
                        rules: [{ validator: this.validLoginName }]
                      })(
                        <Input id="input" onKeyUp={(e) => { this.filterSpace(e, 'loginName') }} style={inputStyle} prefix={<Icon type="user" style={iconStyle} />} onFocus={this.onfocus} placeholder="请输入账户名" />
                      )
                    }

                  </FormItem>
                </Col>
                <div className="inputline"></div>
              </Row>
              <Row style={rowStyle}>
                <FormItem >

                  {
                    getFieldDecorator('password', {
                      initialValue: this.state.userInfo.remberPwd ? this.state.userInfo.password : '',
                      rules: []
                    })(
                      <Input type="password" onKeyUp={(e) => { this.filterSpace(e, 'password') }} prefix={<Icon type="lock" style={iconStyle} />} onFocus={this.onfocus} placeholder="请输入账户密码" />
                    )
                  }
                </FormItem>
                <div className="inputline"></div>

              </Row>
              <Row style={{...rowStyle,...this.state.imgCodeShow}}>
                <Col span="16">
                  <FormItem >
                    {
                      getFieldDecorator('code', {
                        rules: [
                          { require: true }
                        ]
                      })(
                        <Input onKeyUp={(e) => { this.filterSpace(e, 'code') }} onPressEnter={this.submit} minLength={4} prefix={<Icon type="safety" style={iconStyle} />} onFocus={this.onfocus} placeholder="请输入验证码" />
                      )
                    }
                  </FormItem>
                  <div className="inputline"></div>
                </Col>
                <Col span="4">
                  <div onClick={this.getImgCode} className="ideCode">
                    {this.state.imgCode ? <img width={'100%'} height={'100%'} src={'data:image/png;base64,' + this.state.imgCode} alt="imgcode" /> : '获取验证码'}
                  </div>
                </Col>
              </Row>
              <Row style={rowStyle}>
                <Col span="12">
                  <FormItem >
                    {
                      getFieldDecorator('remberUserName', {
                        valuePropName: 'checked',
                        initialValue: this.state.userInfo.remberUserName ? true : false
                      })(
                        <Checkbox  >记住账户</Checkbox>
                      )
                    }
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem >
                    {
                      getFieldDecorator('remberPwd', {
                        valuePropName: 'checked',
                        initialValue: this.state.userInfo.remberPwd ? true : false
                      })(

                        <Checkbox  >记住密码</Checkbox>
                      )
                    }
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <div className={{ display: showError ? 'block' : 'none' }} style={{ ...rowStyle, color: 'red' }}>{tips}</div>
              </Row>
              <Row style={rowStyle}>
                <Col span="24">
                  <Button className="loginBtn" onClick={this.submit} type="primary">登录</Button>
                </Col>
              </Row>
            </Form>
          </div>
        </div>
      </div>
    )
  }
}
export default withRouter(Form.create()(Login));