专栏首页朝雨忆轻尘Spring Boot + Spring Cloud 实现权限管理系统 后端篇

Spring Boot + Spring Cloud 实现权限管理系统 后端篇

登录验证码

登录验证是一般系统都会有的功能,验证的方式也多种多样,比如输入式验证码,拖动式验证条,拖动式验证拼图等等。

我们这里先实现常规的输入验证码的方式,右边显示验证码图片,点击可刷新,左边输入验证码。如下图为实现的效果。

实现案例

验证码的实现需要前后端协同,脱离彼此则不可用,故将前后端的实现放在一起,不再另写前端教程。

后端实现

1.添加依赖

打开 kitty-admin 工程,添加maven依赖。

pom.xml

<!-- kaptcha -->
<dependency>
    <groupId>com.github.axet</groupId>
    <artifactId>kaptcha</artifactId>
    <version>${kaptcha.version}</version>
</dependency>

版本是 <kaptcha.version>0.0.9</kaptcha.version>

2.添加配置

添加验证码配置类 KaptchaConfig,配置验证码的一些样式。

KaptchaConfig.java

package com.louis.kitty.admin.config;

import java.util.Properties;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;

/**
 * 验证码配置
 * @author Louis
 * @date Oct 29, 2018
 */
@Configuration
public class KaptchaConfig {

    @Bean
    public DefaultKaptcha producer() {
        Properties properties = new Properties();
        properties.put("kaptcha.border", "no");
        properties.put("kaptcha.textproducer.font.color", "black");
        properties.put("kaptcha.textproducer.char.space", "5");
        Config config = new Config(properties);
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
}

3.添加验证码获取接口

添加验证码获取接口,并将生成的验证码保存起来,在登录的时候用来跟前台输入验证码进行匹配。

SysLoginController.java

    @GetMapping("captcha.jpg")
    public void captcha(HttpServletResponse response) throws ServletException, IOException {
        response.setHeader("Cache-Control", "no-store, no-cache");
        response.setContentType("image/jpeg");

        // 生成文字验证码
        String text = producer.createText();
        // 生成图片验证码
        BufferedImage image = producer.createImage(text);
        // 保存到验证码到 session
        ShiroUtils.setSessionAttribute(Constants.KAPTCHA_SESSION_KEY, text);

        ServletOutputStream out = response.getOutputStream();
        ImageIO.write(image, "jpg", out);    
        IOUtils.closeQuietly(out);
    }

4.登录接口增加验证码验证

登录接口增加验证码验证,将之前保存的验证码跟前台输入验证码进行匹配。

SysLoginController.java

    /**
     * 登录接口
     */
    @PostMapping(value = "/login")
    public HttpResult login(@RequestBody LoginBean loginBean) throws IOException {
        String userName = loginBean.getAccount();
        String password = loginBean.getPassword();
        String captcha = loginBean.getCaptcha();
        
        // 从session中获取之前保存的验证码跟前台传来的验证码进行匹配
        Object kaptcha = ShiroUtils.getSessionAttribute(Constants.KAPTCHA_SESSION_KEY);
        if(kaptcha == null){
            return HttpResult.error("验证码已失效");
        }
        if(!captcha.equals(kaptcha)){
            return HttpResult.error("验证码不正确");
        }
        
        // 用户信息
        SysUser user = sysUserService.findByName(userName);

        // 账号不存在、密码错误
        if (user == null) {
            return HttpResult.error("账号不存在");
        }
        
        if (!match(user, password)) {
            return HttpResult.error("密码不正确");
        }

        // 账号锁定
        if (user.getStatus() == 0) {
            return HttpResult.error("账号已被锁定,请联系管理员");
        }

        // 生成token,并保存到数据库
        SysUserToken data = sysUserTokenService.createToken(user.getId());
        return HttpResult.ok(data);
    }

5.修改Shiro配置

修改Shiro配置,配置验证码生成接口无需进行登录认证。

ShiroConfig.java

到这里后台代码就完成了。

启动程序,如果结果如下就没问题了。

前端实现

1.添加组件

打开登录页面,在密码栏下面增加一行验证码。

Login.vue

<el-form-item >
  <el-col :span="12">
    <el-form-item prop="captcha">
      <el-input type="test" v-model="loginForm.captcha" auto-complete="off" placeholder="验证码, 单击图片刷新"
        style="width: 100%;">
      </el-input>
    </el-form-item>
  </el-col>
  <el-col class="line" :span="1">&nbsp;</el-col>
  <el-col :span="11">
    <el-form-item>
        <img style="width: 100%;" class="pointer" :src="loginForm.src" @click="refreshCaptcha">
    </el-form-item>
  </el-col>
</el-form-item>

2.添加组件

添加验证码相关的属性,captcha是验证码值,src是验证码图片路径。

Login.vue

3.验证规则

添加验证码验证规则。

Login.vue

4.传入验证码

在登录接口调用的时候,一并传入验证码。

Login.vue

let userInfo = {account:this.loginForm.account, password:this.loginForm.password, captcha:this.loginForm.captcha}

5.刷新验证码

添加refreshCaptcha方法,增加刷新验证码的逻辑。

Login.vue

refreshCaptcha: function(){
      this.loginForm.src = this.global.baseUrl + "/captcha.jpg?t=" + new Date().getTime();
    }

到这里前端diam也完成了。

最终效果

启动前后端,最终界面效果如下。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CentOS 6.9 搭建 Presto 原

    1.下载 presto-server-0.166.tar.gz 和 presto-cli-0.166-executable.jar, 也可以直接到 http:/...

    北漂的我
  • Kotlin:你必须要知道的 inline-noinline-crossinline

    inline: 声明在编译时,将函数的代码拷贝到调用的地方(内联) noinline:声明 inline 函数的形参中,不希望内联的 lambda cros...

    Android技术干货分享
  • SpringBoot 过滤器, 拦截器, 监听器 对比及使用场景 原

    2. 拦截器 (实现 org.springframework.web.servlet.HandlerInterceptor 接口)

    北漂的我
  • mybatis generator 生成 实体类 中文注释 原

    首先 找到 org.mybatis.generator.core_1.3.5.201609070108.jar (位于eclipse\plugins)

    北漂的我
  • SpringBoot 整合 Redis 原

    2. application.properties 文件中添加 Redis 相关配置

    北漂的我
  • SpringBoot源码解析之应用类型识别

    创建SpringBoot项目时,如果不选择starter-web,创建的SpringBoot项目可以正常运行,但运行结束程序便终止了。如果配置starter-w...

    用户1161110
  • 聊聊Elasticsearch的DiscoveryPlugin

    elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/plugins/DiscoveryPlug...

    codecraft
  • Spring 异步线程池的使用 原

    只需要创建一个 Java 配置类, 实现 AsyncConfigurer 接口, 实现 getAsyncExecutor 方法返回线程池. 在 java 配置文...

    北漂的我
  • mybatis mapper解析(上)

    平凡的学生族
  • Caffe 中关于 LetNet-5 网络的定义文件 lenet.prototxt 解析

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhangjunhit/article/de...

    用户1148525

扫码关注云+社区

领取腾讯云代金券