提到登录验证，大家肯定能想到的就是12306的验证码了吧。12306为了防止刷票，可以说是煞费苦心，验证码也越来越难识别，最终即使是人也可能识别不了了。

今天，小编就给大家说一下结节如何实现图片验证码，以及使用代币验证登录。学习本文你将学到：

1.使用captchapng生成图片验证码

2.使用jsonwebtoken实现登录验证

一、图片验证码生成（最后有全部代码)

首先，我们理一下流程，第一步服务器要随机生成一组四位数。

第二步，将这四位数用帆布绘图生成图片。

第三步，我们要将这四位数存起来，以便用户返回数据时做对比。

那么存到哪里呢？很明显为了区分用户，存到会议最为稳妥。

第一步，先要有一个登录页面。在这里我们依然用做出反应，

login.tsx

从“反应”导入*作出反应从“反应世界”导入*作出反应从“反应路由器”导入{链接，浏览故事}；从“axios”导入*作为axios导出默认类注册扩展了做出反应.Componentany，any { constructor(道具){ super(道具)这个。state={ userName : ' '，password : ' '，yzsnoid : ' '，hash : math。random()} } handleUserName(e): any { this。setstate({ userName : e . target。value })} handleYzId(e)3: any { this。setstate({ password 3: e . target。值})返回(div div NAmE=' nav-wrap ' ul NAmE=' nav ' LiLink to='/home '首页/Link/Li Li链接到='/imgLoad '上传/Link/Li Li链接到='/login '登陆/Link/Li/ul/div类名=' content ' div类名=' log in-warp ' p输入类型=' text '类名=' userName '值={ userName } onChange={ this。handleusername。绑定(此)}占位符='用户名//p p输入类型' text' className='password '值={ password } onChange={ this。handlepassword。绑定(此)占位符='密码//p p输入类型=' text '类名=' yz ' value={ yzsnoid } OnChange={ this。handleyzid。绑定(此)占位符='验证码/img src={ ' http://localhost :3000/captcha ' }类名=' yz-img '/p/p输入类型='b