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

使用的第三方插件是 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>