node+vue前后端分离实现登录时使用图片验证码功能

一、前言

前后端分离的应用现在越来越普及，如何实现前后端分离并且实现一些常见的功能逐渐成为一个必须要掌握的技能。

其中注册和登录是所有网站必备的功能。而且在现在的互联网环境中，为了防止恶意攻击等一些非法行为，很多站点都会在登录时使用验证码的方式进行验证。

那么，在本篇文章中，我们就来详细讲解一下如何在node和vue的前后端分离项目中实现登录时使用图片验证码的功能。

二、实现过程

1. 后端实现

（1）安装依赖

首先，在node中我们需要安装需要的插件，这里我们需要使用svg-captcha来生成验证码图片。

npm install svg-captcha --save

（2）应用

在需要使用验证码的地方，我们可以使用如下形式来处理：

const svgCaptcha = require('svg-captcha');

router.get('/captcha', function(req, res, next) {
    // 生成验证码
    const captcha = svgCaptcha.create();
    // 保存验证码，方便用户登录时进行验证
    req.session.captcha = captcha.text.toLowerCase();
    // 返回验证码
    res.type('svg');
    res.send(captcha.data);
});

在上述代码中，我们首先使用svg-captcha来生成验证码图片，然后将验证码保存到session中，方便用户登录时进行验证。

（3）验证用户输入的验证码

在用户登录时，我们可以通过如下方式来验证用户输入的验证码：

router.post('/login', function(req, res) {
    const { username, password, captcha } = req.body;
    if(captcha.toLowerCase() != req.session.captcha){
        res.send({ message: "验证码不正确" });
        return;
    }
    // 验证码验证通过之后，继续进行其他操作
});

在上述代码中，我们首先获取用户登录时输入的验证码，然后将其转换为小写字母后，和之前保存的验证码进行比较，判断是否正确。如果验证码正确，我们可以继续进行其他操作。

1. 前端实现

（1）安装依赖

前端需要安装canvas插件，用来绘制验证码图片：

npm install canvas --save

同时需要安装axios来发送请求：

npm install axios --save

（2）应用

在需要使用验证码的地方，我们可以使用如下形式来处理：

import axios from 'axios'
import { createCanvas } from 'canvas'

export default {
    data () {
        return {
            captcha: '',
            captchaSrc: ''
        }
    },
    created () {
        this.createCaptcha()
    },
    methods: {
        createCaptcha () {
            axios.get('/api/captcha').then(res => {
                this.captcha = res.data.text
                this.captchaSrc = 'data:image/svg+xml;base64,' + btoa(res.data.data)
            })
        },
        submitForm () {
            axios.post('/api/login', {
                username: this.username,
                password: this.password,
                captcha: this.captcha
            }).then(res => {
                // 处理其他操作
            })
        }
    },
    render (h) {
        return h('div', [
            h('input', {
                domProps: {
                    value: this.username
                },
                on: {
                    input: (e) => {
                        this.username = e.target.value
                    }
                }
            }),
            h('input', {
                domProps: {
                    value: this.password
                },
                on: {
                    input: (e) => {
                        this.password = e.target.value
                    }
                }
            }),
            h('canvas', {
                attrs: {
                    width: '80',
                    height: '30'
                },
                on: {
                    click: () => {
                        this.createCaptcha()
                    }
                }
            }, [ h('img', {
                attrs: {
                    src: this.captchaSrc
                }
            })]),
            h('button', {
                on: {
                    click: () => {
                        this.submitForm()
                    }
                }
            }, [ '登录' ])
        ])
    }
}

在上述代码中，我们首先通过axios发送请求到后端，获取验证码图片。然后将验证码显示到canvas中，同时可以通过点击事件，刷新验证码。用户在登录时，输入验证码后，可以通过axios向后端发送请求，进行验证码的验证。

三、小结

通过以上步骤，我们详细讲解了如何在node+vue前后端分离的项目中，实现登录时使用图片验证码功能。

我们在后端使用svg-captcha生成验证码图片，然后保存到session中，方便后续进行验证。在前端中，我们使用canvas插件来绘制验证码图片，同时使用axios发送请求进行验证。