在Ant Design Pro登录功能中集成图形验证码组件的方法步骤

 更新时间:2021年05月24日 14:26:32   作者:hanxiaozhang2018  
这篇文章主要介绍了在Ant Design Pro登录功能中集成图形验证码组件的方法步骤,这里的登录功能其实就是一个表单提交,实现起来也很简单,具体实例代码跟随小编一起看看吧

前言:

本篇文章只介绍在Ant Design Pro登录功能中集成图形验证码组件的方法步骤,服务端方法请参考《基于OAuth2.0授权系统的验证码功能》

正文:

在Ant Design Pro模板中,使用账号密码登录功能部分(如下图),并没有做图形验证码的开发,所以这部分功能就需要我们自己去实现。这里登录功能其实本质是一个表单提交,所以我们只需自己开发一个图形验证码表单控件就可以,具体实现如下。

1. 图形验证码表单控件代码CaptchaInput.tsx:

import React, {useState, useEffect} from 'react';
import {Input, message} from 'antd';
import {SafetyCertificateOutlined} from '@ant-design/icons';
import api from '@/utils/api';
import stringUtil from "@/utils/stringUtil";
import request from "@/utils/request";
import {useIntl} from "umi";
 
 
interface CaptchaInputValue {
  captchaCode?: string;
  captchaKey?: string;
}
 
interface CaptchaInputProps {
  value?: CaptchaInputValue;
  onChange?: (value: CaptchaInputValue) => void;
}
 
/**
 * 获取验证码
 */
const getCaptcha = async () => {
  try {
    const data = await request(api.captcha);
    if (data.code === 1) {
      return data.data;
    }
  } catch (error) {
    message.error('获取部门树失败,请重试');
    return [];
  }
  message.error('获取部门树失败,请重试');
  return [];
}
 
const CaptchaInput: React.FC<CaptchaInputProps> = ({value = {}, onChange}) => {
 
  const intl = useIntl();
  const [captchaCode, setCaptchaCode] = useState<string>('');
  const [captchaKey, setCaptchaKey] = useState<string>('');
  const [imageData, setImageData] = useState<string>('');
 
  // 触发改变
  const triggerChange = (changedValue: { captchaCode?: string; captchaKey?: string }) => {
    if (onChange) {
      onChange({captchaCode, captchaKey, ...value, ...changedValue});
    }
  };
 
  useEffect(() => {
    getCaptcha().then((data: any) => {
      setCaptchaKey(data.captchaKey);
      setImageData(data.image);
      triggerChange({captchaKey: data.captchaKey});
    })
  }, []);
 
 
  // 输入框变化
  const onChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const code = e.target.value || '';
    if (stringUtil.isNotEmpty(code)) {
      setCaptchaCode(code);
    }
    triggerChange({captchaCode: code});
  }
 
  // 时间类型变化
  const onClickImage = () => {
    getCaptcha().then((data: any) => {
      setCaptchaKey(data.captchaKey);
      setImageData(data.image);
      triggerChange({captchaKey: data.captchaKey});
    })
  };
 
  return (
    <span>
       <Input.Group compact>
          <Input prefix={<SafetyCertificateOutlined style={{color: "#319cff"}}/>} placeholder={intl.formatMessage({
            id: 'pages.login.captcha.placeholder',
            defaultMessage: '请输入验证码',
          })}
                 onChange={onChangeInput}
                 style={{width: '75%', marginRight: 5, padding: '6.5px 11px 6.5px 11px', verticalAlign: 'middle'}}/>
                   <img style={{width: '23%', height: '35px', verticalAlign: 'middle', padding: '0px 0px 0px 0px'}}
                        src={imageData} onClick={onClickImage}/>
       </Input.Group>
    </span>
  );
};
export default CaptchaInput;

2.登录页面集成组件:

import CaptchaInput from './components/CaptchaInput';
 
...   ... 
 
  const handleSubmit = (values: LoginParamsType) => {
    const {dispatch} = props;
    values.client_id = "hanxiaozhang";
    values.client_secret = "hanxiaozhang";
    values.scope = "hanxiaozhang";
    values.grant_type = "password";
    values.captcha_key = values.captchaComp.captchaKey;
    values.captcha_code = values.captchaComp.captchaCode;
    delete values.captchaComp;
    dispatch({
      type: 'login/login',
      payload: {...values, type},
    });
  };
 
...   ... 
 
            <Form.Item name="captchaComp" rules={[{
              validateTrigger: 'onBlur',
              validator: async (rule, value) => {
                // console.log(rule)
                if (stringUtil.isEmpty(value.captchaCode)) {
                  throw new Error('请输入验证码!');
                }
              }
            },]}>
              <CaptchaInput/>
            </Form.Item>
 
...   ...

 3.使用:

集成之后的效果如下:

以上就是在Ant Design Pro登录功能中集成图形验证码组件的详细内容,更多关于Ant Design Pro登录的资料请关注脚本之家其它相关文章!

相关文章

  • React Component存在的几种形式详解

    React Component存在的几种形式详解

    这篇文章主要给大家介绍了关于React Component存在的几种形式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • 详解react阻止无效重渲染的多种方式

    详解react阻止无效重渲染的多种方式

    这篇文章主要介绍了详解react阻止无效重渲染的多种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 深入理解React中何时使用箭头函数

    深入理解React中何时使用箭头函数

    对于刚学前端的大家来说,对于React中的事件监听写法有所疑问很正常,特别是React中箭头函数使用这块,下面这篇文章主要给大家深入的讲解了关于React中何时使用箭头函数的相关资料,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-08-08
  • 使用react-beautiful-dnd实现列表间拖拽踩坑

    使用react-beautiful-dnd实现列表间拖拽踩坑

    相比于react-dnd,react-beautiful-dnd更适用于列表之间拖拽的场景,本文主要介绍了使用react-beautiful-dnd实现列表间拖拽踩坑,感兴趣的可以了解一下
    2021-05-05
  • 详解关于react-redux中的connect用法介绍及原理解析

    详解关于react-redux中的connect用法介绍及原理解析

    本篇文章主要介绍了详解关于react-redux中的connect用法介绍及原理解析,非常具有实用价值,需要的朋友可以参考下
    2017-09-09
  • React组件之间的通信的实例代码

    React组件之间的通信的实例代码

    本篇文章主要介绍了React组件间通信的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • React-router4路由监听的实现

    React-router4路由监听的实现

    这篇文章主要介绍了React-router4路由监听的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • react项目从新建到部署的实现示例

    react项目从新建到部署的实现示例

    这篇文章主要介绍了react项目从新建到部署的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • React 非父子组件传参的实例代码

    React 非父子组件传参的实例代码

    React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。本文给大家介绍React 非父子组件传参的相关知识,感兴趣的朋友跟随一起看看吧
    2021-04-04
  • 如何将你的AngularJS1.x应用迁移至React的方法

    如何将你的AngularJS1.x应用迁移至React的方法

    本篇文章主要介绍了如何将你的AngularJS1.x应用迁移至React的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02

最新评论