我们在实际项目中时在登录的时候 时常会遇到图形验证码，来进行验证用户操作。

什么是图形验证码？

图形验证码是验证码的一种，有防止黑客对某一特定注册用户用程序暴力破解私人信息、恶意破解密码、刷论坛灌水的作用。票、
图形验证码是一种区分用户是计算机还是人的公共全自动程序。验证码是现在很多网站通行的方式，由计算机生成并评判，但是只有人才能解答。

以登录功能为例，大概流程，

1前端直接调用后端接口  获取图形验证码 以及唯一标识 

2前端将后端返给的图片验证码进行解析

3输入验证 并将参数和唯一标识传给后端

完整代码：

<template>
  <div class="login" :style="{ backgroundImage: `url(${bgImg})` }">
    <div class="login-title">
      <img class="login-logo" src="@/assets/loginLogo.png" alt="" />
    </div>
    <div class="login-inpt">
      <a-input v-model="phone" placeholder="手机号" size="large">
        <a-icon slot="prefix" type="tablet" />
      </a-input>

      <a-input-password
        size="large"
        v-model="password"
        placeholder="密码"
        v-if="loginType == 1"
      >
        <a-icon slot="prefix" type="lock" />
      </a-input-password>
      <div class="login-verification">
        <a-input
          size="large"
          v-model="imgCode"
          placeholder="验证码"
          class="w200"
        >
          <a-icon slot="prefix" type="tag" />
        </a-input>

        <img
          class="code-img ml20"
          :src="'data:image/png;base64,' + imgCodeObj.codeImg"
        />
      </div>
      <a-button
        :loading="loading"
        size="large"
        type="primary"
        block
        @click="handLogin"
      >
        登录
      </a-button>
    </div>
  </div>
</template>

<script>
import bgImg from './img/login-bgc.png'
import { authenticationForm, getImgCode } from './api/api'
import { validatorPhone } from '@/assets/js/auth'
export default {
  data() {
    return {
      bgImg,
      // 图形验证码 回显
      imgCodeObj: {
        codeId: '',
        codeImg: ''
      },
      imgCode: '', // 输入框 验证码 传给后端
      phone: '', 
      password: '',
      loading: false
    }
  },
  created() {
    this.getImgCodeFn()
    localStorage.clear() // 登录前清除token  
  },
  methods: {
    // 获取图形验证码
    getImgCodeFn() {
      getImgCode().then((res) => {
        const { code, data } = res.data
        if (code == 0) {
          this.imgCodeObj = data
        }
      })
    },
    // 登录
    handLogin() {
      let isPhone = validatorPhone(this.phone)
      if (isPhone) {
          if (!this.password) {
            this.$message.error('密码不能为空')
            return
          }
          let params= {
            username: this.phone,
            password: this.password,
            codeId: this.imgCodeObj.codeId,
            imgCode: this.imgCode
          }
          this.loading = true
          authenticationForm(params).then((res) => {
            if (res.data.code == 0) {
              localStorage.setItem('token', res.data.data)
              this.$message.success('登录成功')
              this.$router.push('/')
              this.loading = false
            } else {
              this.loading = false
            }
          })
      } else {
        this.$message.error('请输入正确的手机号！')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}
.login-title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-logo {
  width: 368px;
}
.login-tittle-name {
  width: 264px;
  height: 49px;
  font-size: 33px;
  line-height: 49px;
  text-align: left;
  font-weight: bold;
}
.login-inpt {
  padding: 58px 0 48px 0;
  width: 368px;
  height: 320px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}
.login-code {
  width: 120px;
  margin-left: 12px;
}
.login-verification {
  width: 368px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .code-img {
    width: 140px;
    height: 40px;
  }
}
</style>

解析图片代码：

<img
          class="code-img ml20"
          :src="'data:image/png;base64,' + imgCodeObj.codeImg"
        />

结果图片：