laravel:前后端分离的图形验证码(10.27.0 / gregwar/captcha v1.2.0)

<?php
namespace App\extend\captcha;
use Gregwar\Captcha\CaptchaBuilder;
use Gregwar\Captcha\PhraseBuilder;

class captcha {
      //生成图形验证码
      static public function getCaptcha($codeLength,$width,$height) {
          // 包含哪些字符
          $chars = '0123456789abcefghijklmnopqrstuvwxyz';
          $builder = new PhraseBuilder($codeLength, $chars);
          $captcha = new CaptchaBuilder(null, $builder);

          // 生成验证码
          $captcha->build($width, $height, $font = null);

          // base64 image
          $image = $captcha->inline();
          //uniqid
          $uniqid = uniqid().mt_rand(1000,9999);
          //value
          $value = $captcha->getPhrase();
          //json
          return ['code' => 0, 'image'=>$image,'uniqid'=>$uniqid,'value'=>$value];
      }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\extend\captcha\captcha;

use Illuminate\Support\Facades\Redis;

class ImageController extends Controller
{
    /**
     * 输出验证码图像
     */
    public function captcha(Request $request){

        $captArr = captcha::getCaptcha(4,100,40);

        //设置值
        Redis::setex($captArr['uniqid'],600, $captArr['value']);

        $ret = [
            'code'=>0,
            'image'=>$captArr['image'],
            'uniqid'=>$captArr['uniqid'],
        ];

        return json_encode($ret);
    }

    /**
     * 检查验证码是否正确
     */
    public function checkCapt(Request $request) {
        $uniqid = $request->post('uniqid');
        $captcode = $request->post('captcode');
        //验证码:
        $value = Redis::get($uniqid);
        //检查验证码是否正确
        if (strtolower($captcode) !== strtolower($value)) {
            return json(['code' => 400, 'msg' => '输入的验证码不正确']);
        }
    }
}

      <el-form-item label="" prop="captcode" style="margin-bottom: 20px;">
        <el-input v-model="account.captcode"   placeholder="请输入验证码" style="width: 66%;float:left;">
          <!--<template #suffix><i class="el-icon-unlock el-input__icon"></i></template>-->
        </el-input>
        <img style="vertical-align: middle;float:right;background: #ccc;border-radius:3px;cursor:pointer;margin-left:14px;"
            :src="captImg"
            width="120"
            height="40"
            alt="请输入验证码"
            @click="getCaptImg()"
        />
      </el-form-item>

export default {
  name: 'LayoutLogin',
  setup() {
    const captId = ref('');
    const captImg = ref("");
    //获取验证码图片信息 
   const getCaptImg =()=>{
      console.log('begin get capt img');
      let url = "/api/image/captcha";
      let getData = {
        //msg:'hello',
      };
      axios({
        method:"get",
        url:url,
        params:getData,
      }).then((res) => {
            console.log(res.data);
            if (res.data.code == 0) {
              captId.value = res.data.uniqid;
              captImg.value = res.data.image;
            } else {
              alert("error:"+res.data.msg);
            }
          }
      ).catch(err=>{
        console.log(err);
        alert('网络错误:'+err.message);
      });
    };
    getCaptImg();