nodejs+express+svg-captcha验证码实现,在vue中使用

2,740 阅读1分钟

后台接口搭建

  1. 安装:cnpm i svg-captcha -S
  2. 接口的设置:
userRouter.get('/getCaptcha', (req, res) => {
    res.header('Access-Control-Allow-Origin', "*");
    const cap = captcha.create({
        size: 4,
        ignoreChars: '0o1il',
        noise: 1,
        color: true,
        background: '#cc9966'
    });
    req.session.captcha = cap.text; // session 存储
    res.type('svg'); // 响应的类型
    res.send(cap.data);
})

  1. 必须使用cookie进行存值
    • 安装:cnpm i express-session -S
    • 在app.js中进行引入:
 const session = require('express-session');
 app.use(session({
  secret: 'luckystar',
  name: 'captcha',
  resave: false,
  saveUninitialized: true,
  cookie: { maxAge: 50000 },
  rolling: true,
}));
  1. 在vue中进行引用:
<el-form-item prop="password">
       <el-input placeholder="请输入验证码" v-model="loginForm.captcha">
       //img中的src就是node后台设置的验证码的请求地址
         <img
           class="captcha-img"
           src="http://localhost:3003/user/getCaptcha"
           slot="append"
           @click="changeCaptcha"
         />
       </el-input>
       <i class="el-icon-edit-outline el-icon"></i>
</el-form-item>

<script>
methods:{
   changeCaptcha(e){
       e.target.src = `http://localhost:3003/user/getCaptcha?${Math.random()}`;
   }
}
</script>

以上这四步是将验证码显示在前端界面上,并没有进行数据的提交