1.验证码

npm i svg-captcha //安装依赖

1.1前端代码

 <el-form >
 <el-form-item prop="captcha" label="验证码" class="captcha-container" >
      <div class="captcha">
        <img :src="code.captcha" @click="resetCaptcha">
      </div>
      <el-input v-model="form.captcha" placeholder="请输入验证码"></el-input>
    </el-form-item>
 </el-form>
    methods:{
        resetCaptcha(){
          this.code.captcha = '/api/captcha?_t'+new Date().getTime()
        },
    },
     data(){
    return {
      form:{
        captcha:""
      },
      rules:{
        captcha:[
          { required:true, message:"请输入验证码" },
        ],
      },
      code:{
        captcha:"/api/captcha"
      }
    }
    

1.2后端代码

// app/router.js 
module.exports = app => {
  const { router, controller } = app
  const jwt = app.middleware.jwt({ app })
  router.get('/', controller.home.index)

  // 验证码
  router.get('/captcha', controller.util.captcha)
}
// app/controller/util.js
class UtilController extends BaseController { 
  async captcha() {
    const captcha = svgCaptcha.create({
      size: 4,
      fontSize: 50,
      width: 100,
      height: 40,
      noise: 3,
    })
    console.log('captcha=>', captcha.text)
    this.ctx.session.captcha = captcha.text
    this.ctx.response.type = 'image/svg+xml'
    this.ctx.body = captcha.data
  }  
}

2.邮件验证

npm i nodemailer //安装依赖

2.1前端代码

 <el-form> 
    <el-form-item prop="email" label="邮箱">
      <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
    </el-form-item>
     <el-form-item prop="emailcode" label="验证码" >
        <el-button @click="sendEmailCode" :disabled="send.timer>0" type='primary'>
        {{sendText}}
        </el-button>
      <el-input v-model="form.emailcode" placeholder="请输入邮件验证码"></el-input>
    </el-form-item>
 </el-form> 
 
    methods:{
         async sendEmailCode(){
          // 设置10秒内，按钮不能点击，前端判断条件send.timer>0
          await this.$http.get('/sendcode?email='+this.form.email)
          this.send.timer = 10
          this.timer = setInterval(()=>{
            this.send.timer -= 1
            if(this.send.timer===0){
              clearInterval(this.timer)
            }
          },1000)
        },
    },
    computed:{
    sendText(){//时刻刷新的显示时间
      if(this.send.timer<=0){
        return '发送'
      }
      return `${this.send.timer}s后发送`
    }
  },
  data(){
    return {
      send:{
        timer:0
      },
      form:{
        email:"xxxxx@qq.com", 
      },
      rules:{
        email:[
          { required:true, message:"请输入邮箱" },
          { type:'email', message:"请输入正确的邮箱格式" },
        ], 
        emailcode:[
          { required:true, message:"请输入邮箱验证码" },
        ], 
      }, 
    }
  }

2.2后端代码

// app/router.js 
module.exports = app => {
  const { router, controller } = app
  const jwt = app.middleware.jwt({ app })
  router.get('/', controller.home.index)
  // 发送邮件
  router.get('/sendcode', controller.util.sendcode)
}
// app/controller/util.js
class UtilController extends BaseController {  
  async sendcode() {
    const { ctx } = this
    const email = ctx.query.email
    const code = Math.random().toString().slice(2, 6)
    console.log('邮箱' + email + '验证码:' + code)
    ctx.session.emailcode = code

    const subject = '验证码'
    const text = ''
    const html = `<h2>xxxx</h2><span>${code}</span></a>`
    const hasSend = await this.service.tools.sendMail(email, subject, text, html)
    if (hasSend) {
      this.message('发送成功')
    } else {
      this.error('发送失败')
    }
  }
}
//app/service/tools.js
const nodemailer = require('nodemailer')
const userEmail = 'xxxx@163.com'
const transporter = nodemailer.createTransport({
  service: '163',
  secureConnection: true,
  auth: {
    user: userEmail,
    pass: 'xxxxx',
  },
})
class ToolService extends Service {
  async sendMail(email, subject, text, html) {
    console.log(email, subject, html)
    const mailOptions = {
      from: userEmail,
      cc: userEmail,
      to: email,
      subject,
      text,
      html,
    }
    try {
      await transporter.sendMail(mailOptions)
      return true
    } catch (err) {
      console.log('email error', err)
      return false
    }
  } 
}

3.格式校验

npm i egg-validate -s

//config/plugin.js
exports.validate = {
  enable: true,
  package: 'egg-validate',
}

//app/controller/user.js 
const BaseController = require('./base')
const createRule = {
  email: { type: 'email' },
  nickname: { type: 'string' },
  passwd: { type: 'string' },
  captcha: { type: 'string' },
}
//app/controller/user.js
class UserController extends BaseController {
  async register() {
    const { ctx } = this
    try {
      // 校验传递的参数
      ctx.validate(createRule)
    } catch (e) {
      // console.log(e)
      return this.error('参数校验失败', -1, e.errors)
    } 
    ...
    // this.success({name:'xxx'})
  }
}
module.exports = UserController