防止注册机,登录时-验证码图片的生成=前端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); });