前后端分离登录功能使用图形验证码功能

95 阅读 0 评论 63 点赞

我是靠谱客的博主沉静太阳，这篇文章主要介绍前后端分离登录功能使用图形验证码功能，现在分享给大家，希望可以做个参考。

使用的第三方插件是 svg-captcha

后端生成验证码

本来是想把验证码的文本信息保存再session中的。后来发现想太多了，
图形验证码的文本信息是不用发给前端的，只需要定义一个全局变量接收就行，每次请求新的验证码就重新赋值

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
// 处理登录图形验证码
let captchaText = ' '
var svgCaptcha = require('svg-captcha');
app.get('/admin/api/login/verify',async(req,res)=>{
var captcha = svgCaptcha.create();
// req.session.captcha = captcha.text;
captchaText = captcha.text;
res.type('svg');
// console.log(captcha)
res.status(200).send(captcha.data);
})

后端处理登录请求

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//处理登录请求
app.post('/admin/api/login',async(req,res)=>{
const Manager = require('../../models/manager')
// 判断验证码是否正确
const verify = req.body.verify;
// 输入的验证码小写与 正确的验证码小写 是否相等
if(verify.toLocaleLowerCase()!=captchaText.toLocaleLowerCase()){
// 错误的验证码
return res.status(422).send({
message: '验证码错误'
})
}
/// 下面继续判断 用户名 密码就行
})

前端的页面

img标签那里，原来是用this.$http.get(‘login/verify’)获得数据的，但是获得是data是二进制和svg格式的，没想到解决办法，所有就直接全链接访问了

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
<div clss="login-container">
<el-card header="请先登录" class="login-card">
<el-form @submit.native.prevent="login" :rules="rules" ref="model" :model="model">
<el-form-item label="用户名" prop="username">
<el-input v-model="model.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="model.password"></el-input>
</el-form-item>
<el-form-item label="验证码" prop="verify">
<el-input
v-model="model.verify"></el-input>
<img id="verify_img" src="http://localhost:3000/admin/api/login/verify"
title="看不清？点击刷新"
οnclick="javascript:this.src='http://localhost:3000/admin/api/login/verify?mt='+Math.random()">
</el-form-item>
<el-form-item >
<el-button type="primary" native-type="submit">登录</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>