【若依-Vue分离版】登录验证码更换为EasyCaptcha

【若依-Vue分离版】登录验证码更换为EasyCaptcha_第1张图片

1.首先在ruoyi-framework  pom.xml添加依赖:



    com.github.whvcse
    easy-captcha
    1.6.2

 2.在ruoyi-admin的CaptchaController中修改getCode方法的代码:

 /**
     * 生成验证码
     */
    @GetMapping("/captchaImage")
    @ApiOperation(value = "生成验证码", notes = "生成验证码")
    public AjaxResult getCode(HttpServletResponse response) throws IOException
    {
        AjaxResult ajax = AjaxResult.success();
        boolean captchaOnOff = configService.selectCaptchaEnabled();
        ajax.put("captchaOnOff", captchaOnOff);
        if (!captchaOnOff)
        {
            return ajax;
        }

        // 保存验证码信息
        String uuid = IdUtils.simpleUUID();
        String verifyKey = CacheConstants.CAPTCHA_CODE_KEY + uuid;


        //以下6行是新加的代码
        Captcha captcha = new ArithmeticCaptcha(115, 42);  //创建算术验证码
        String code = captcha.text(); //得到算术验证码的计算值
        redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);//存入redis

        ajax.put("uuid", uuid);
        ajax.put("img", captcha.toBase64());  //获得图片的base64编码
        return ajax;
    }
}

3.在ruoyi-ui/src/views/login.vue页面 修改getCode方法

getCode() {
  getCodeImg().then(res => {
    this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
    if (this.captchaOnOff) {
      this.codeUrl = res.img; //"data:image/gif;base64," + res.img;
      this.loginForm.uuid = res.uuid;
    }
  });
},

你可能感兴趣的:(Java,#,vue,java,spring,intellij-idea)