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

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

后端生成验证码

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

// 处理登录图形验证码
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);
})

后端处理登录请求

//处理登录请求
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格式的，没想到解决办法，所有就直接全链接访问了

<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>

最后

以上就是沉静太阳为你收集整理的前后端分离登录功能使用图形验证码功能的全部内容，希望文章能够帮你解决前后端分离登录功能使用图形验证码功能所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。