antdesignpro引入依赖如何使用(在Ant Design Pro登录功能中集成图形验证码组件的方法步骤)
类别:编程学习 浏览量:118
时间:2022-01-28 01:35:06 antdesignpro引入依赖如何使用
在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登录的资料请关注开心学习网其它相关文章!
您可能感兴趣
- antdesignpro引入依赖如何使用(在Ant Design Pro登录功能中集成图形验证码组件的方法步骤)
- thinkphp5如何实现消息队列(thinkPHP5.1框架使用SemanticUI实现分页功能示例)
- css 最高层级(浅谈CSS 权值 层叠 重要性!important)
- react和antd项目教程(React引入antd-mobile+postcss搭建移动端)
- 关于虚拟机virtual box(vagrant+virtualBox构建虚拟机的方法)
- MySQL SQL Assistant智能提示
- ant design 的vue批量操作(ant desing vue table 实现可伸缩列的完整例子)
- react动态添加组件属性(react使用antd的上传组件实现文件表单一起提交功能完整代码)
- react和antd管理系统(手把手教你从零开始react+antd搭建项目)
- react表单组件怎么写(react antd实现动态增减表单)
- vue左侧边栏的制作(Vue+Vant实现顶部搜索栏)
- react怎么使用父组件(关于antd tree和父子组件之间的传值问题react 总结)
- antdesign接收数据状态(Ant Design Blazor 组件库的路由复用多标签页功能)
- jquery修改带有!important的样式
- vue前端搜索功能如何实现(使用Vue3+Vant组件实现App搜索历史记录功能示例代码)
- 微信小程序开发模式(微信小程序引入Vant框架的全过程记录)
- 经常发这三种 朋友圈 的人,要迅速屏蔽(经常发这三种朋友圈)
- 有种尴尬叫朋友圈忘屏蔽,大学生上演社死现场,父母亲自下场吐槽(有种尴尬叫朋友圈忘屏蔽)
- 朋友圈屏蔽你的人,可以直接看淡了(朋友圈屏蔽你的人)
- 金球奖只青睐那些会戴珠宝的女人(金球奖只青睐那些会戴珠宝的女人)
- 浙江省一个县,人口超40万,建县历史超1100年(浙江省一个县人口超40万)
- 五代十国南唐历代国君(五代十国南唐历代国君)
热门推荐
- mysql显示所有数据库语句(MySQL数据库自动补全命令的三种方法)
- sql自动化上线平台(sql自动化检查和分析工具 之soar和soar-web 安装和使用体验)
- dedecms数据库优化(dedecms友情链接flink增加下拉菜单的方法)
- python字符串相似度匹配(Python实现字符串匹配的KMP算法)
- 安全进入docker容器的方法(使用docker部署一个简单的c/c++程序的方法)
- sql的select语句用法(SQL update select结合语句详解及应用)
- css样式词大全(超全面CSS样式整理)
- python使用门算法加密文件(python实现栅栏加解密 支持密钥加密)
- python3.7保存文件(详解用python实现基本的学生管理系统文件存储版python3)
- 带农历的js日期控件
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9