通过使用node.js+captchapng+jsonwebtoken完成登录验证

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

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

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

2.使用jsonwebtoken实现登录验证

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

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

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

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

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

第一步，先要有一个登录页面。在这里我们依然用react,

login.tsx

页面是这样的

我们需要通过服务器给一张验证图片。

router/index.js 添加如下代码

captcha方法是生成一张含四位数字的图片，然后将图片保存到session中。

将此方法在 router/index.js 中引用

也就是说我们访问localhost:3000/captcha就会返回一张图片。

有了这个连接后我们就可以通过图片的src属性拿到该图片，但是当点击图片的时候要重新刷新，所以我们需要给图片添加一个点击刷新事件。将下面代码插入到login.tsx中

img标签也变成了

代码如下:

<img src={"http://localhost:3000/captcha?aaa="+this.state.hash} className="yz-img" onClick={this.setHash.bind(this)} />

此时login.tsx全部代码：

这样只要点击img，就会随机生成一个hash，然后就会调用新的图片出来。

接着我们进行登录验证。

loginer方法就是进行登录验证的。

拿到用户的用户名信息，密码以及验证码一次对比，最后返回登录是否成功数据。

当用户登陆成功以后，下次登录就不需要再次登录了，以往的方法可以选则session或者cookie的方式，在这里我们使用token。因为现在已经实现了前后端分离开发，我们更倾向于构建单页面配合ajax构建应用。而token最适合这种开发模式不过了。

token登录验证

token是一串经过加密的字符串，登录成功以后返回给用户保存，然后用户在请求接口时，都带这个token。所以我们需要对token进行加密。

Json Web Token就是专门解决这个问题的，原理就不做详解了，其实就是按照一定的方式得到一个字符串，然后在通过某种方式解开。

我们要做的第一步就是

当用户登录成功后，创建一个token返回给用户。

第二步：用户拿到token后应该把token存到本地。

第三步：需要写一个中间层，每次用户请求时我们验证用户携带的token是否正确。正确返回数据，不正确返回警告。
用户每次请求数据的时候要在header里把token带上。

第一步：还是controller/login.js

这次在loginer方法里面我们加入设置token，并返回给用户。setToken方法是设置token的方法。

第二步：用户拿到后保存。

在login.tsx就变成如下

在sbumit方法里我们将token放到了sessonstorage里面。

第三步：设置中间件每次请求接口时，验证token,如果解析成功加入到请求头里面。

./middleware/token.js

testToken方法是验证token，setToken是设置token方法

假如没有登录请求是这样的

在 router/index.js

我们在另一个页面调用list接口试一下

当调用getList时，如果此时没有登录res.data.success就会为false，则跳到登录页。

全部代码

node.js

app.js

index.js

controller/login.js

middleware/token.js

react部分

login.tsx

home.js 获取列表信息

以上就是通过使用node.js+captchapng+jsonwebtoken完成登录验证的详细内容，更多请关注Gxl网其它相关文章！