防止注册机，登录时-验证码图片的生成=前端vue+后端node

前端

<section class="login-message">
               <input type="text" maxlength="11" placeholder="验证码" v-model="captcha">
               <img
                 ref="captcha"
                 class="get-verification"
                 src="http://localhost:3000/api/captcha"
                 alt="captcha"
                 @click.prevent="getCaptcha()"
               >
             </section>

　　点击验证码图片事件

// 4. 获取图形验证码
getCaptcha() {
  //  加一个时间戳作用：让验证码时时刻刻不一样
  this.$refs.captcha.src = 'http://localhost:3000/api/captcha?time=' + new Date();
}

------------------------------------------------------------------------------
后端生成验证码接口

router.get('/api/captcha', (req, res) => {
    // 1. 生成随机验证码
    let captcha = svgCaptcha.create({
        color: true,
        noise: 3, // 三条干扰线
        ignoreChars: '0o1i',
        size: 4
    });
    // console.log(captcha.text);
 
    // 2. 保存
    req.session.captcha = captcha.text.toLocaleLowerCase();
    console.log(req.session);
 
    // 3. 返回客户端
    res.type('svg');
    res.send(captcha.data);
});