node+vue前後端分離實現登入時使用圖片驗證碼功能

const svgCaptcha = require('svg-captcha')

exports.checkCode = (req, res) => {
    const img = svgCaptcha.create({
        size: 4,
        ignoreChars: '0o1l',
        color: true,
        noise: 1,
        background: '#666',
        height: 40,
        width: 113
    })
    console.log(img.text);
    res.send(img)
}

const express = require('express');
const userHandle = require('../route_handle/user')

const router = express.Router();

router.get('/checkCode', userHandle.checkCode)

module.exports = router

<template>
  <div class="login">
    <el-form class="login-form" :model="loginForm">
      <h3 class="title">若依後臺管理系統</h3>
      <el-form-item>
        <el-input placeholder="Account" type="text" prefix-icon="el-icon-user-solid" v-model="loginForm.username">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="Password" type="password" prefix-icon="el-icon-lock" v-model="loginForm.password">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="CheckCode" prefix-icon="el-icon-picture-outline-round" v-model="loginForm.checkCode"
          style="width: 63%">
        </el-input>
        <div class="login-code">
          <!-- <img :src="codeUrl" class="login-code-imgs" @click="getCode"/> 
          -->
          <div @click="getCode" v-html="code" style="vertical-align:middle"></div>
        </div>
      </el-form-item>
      <el-checkbox v-model="loginForm.rememberme" style="margin: 0 0 15px 0;">Remenber Me</el-checkbox>
      <el-form-item>
        <el-button style="width: 100%" @click="submit('loginForm')" type="primary">Login</el-button>
      </el-form-item>
    </el-form>
    <div class="el-login-footer">
      <span>Copyright © 2018-2022 huanggang All Rights Reserved.</span>
    </div>
  </div>
</template>

<script>
// import { getCodeImg } from '@/api/login'
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        checkCode: '',
        rememberme: false
      },
      codeUrl: '',
      code: '',
      codeText: ''
    }
  },
  methods: {
    submit() {
      if (this.loginForm.checkCode.toLowerCase() == this.codeText.toLowerCase()) {
        this.$message({
          type: "success",
          message: '登入成功'
        })
      } else (this.$message({
        type: 'error',
        message: '驗證碼錯誤！'
      }))
    },
    getCode() {
      this.$axios.get('/checkCode')
        .then(res => {
          console.log(res)
          this.code = res.data.data
          this.codeText = res.data.text
        })
    }
  },
  created() {
    this.getCode()
  }
}
</script>

<style scoped lang="scss">
.login {
  display: flex;
  height: 100%;
  background: url(../assets/images/login-background.jpg);
  background-size: cover;
  justify-content: center;
  align-items: center;
}

.title {
  text-align: center;
  color: #707070;
  margin: 0 auto 30px;
}

.login-form {
  box-sizing: border-box;
  width: 400px;
  border-radius: 6px;
  background-color: #fff;
  padding: 25px 25px 5px 25px;
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  font-family: Arial;
}

.login-code {
  width: 33%;
  float: right;

  div {
    cursor: pointer;
  }
}

.login-code-imgs {}
</style>