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

使用的第三方插件是 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格式的，没想到解决办法，所有就直接全链接访问了