SpringBoot整合jwt+redis+随机验证码+Vue的登录功能

这篇具有很好参考价值的文章主要介绍了SpringBoot整合jwt+redis+随机验证码+Vue的登录功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、运行效果展示

SpringBoot整合jwt+redis+随机验证码+Vue的登录功能

SpringBoot整合jwt+redis+随机验证码+Vue的登录功能

!注意:前端的Vue项目中要引入element-ui和axios

# npm安装element-ui、axios

npm insatll element-ui -S

npm install axios -S

# 在main中引入

// 引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

// 使用axios
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:'
Vue.prototype.$axios = axios

二、环境依赖准备

1、引入pom依赖

<!-- jwt -->
<dependency>
  <groupId>com.auth0</groupId>
  <artifactId>java-jwt</artifactId>
  <version>3.18.2</version>
</dependency>
<!-- redis -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
<!-- lombok -->
<dependency>
  <groupId>org.projectlombok</groupId>
  <artifactId>lombok</artifactId>
  <optional>true</optional>
</dependency>

2、配置yaml

server:
  port: 8080
spring:
  application:
    name: login-service # 服务名称
  redis:
    host: 127.0.0.1
    port: 6379
    password: 123456
    database: 0 #操作的是0号数据库
    jedis:
      #Redis连接池配置
      pool:
        max-active: 8 #最大连接数
        max-wait: 1ms #连接池最大阻塞等待时间
        max-idle: 4 #连接池中的最大空闲连接
        min-idle: 0 #连接池中的最小空闲连接

三、jwt生成与验证token

1、编写token工具类TokenUtils

import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTCreator;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.exceptions.TokenExpiredException;
import lombok.Data;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.data.redis.core.ValueOperations;
import org.springframework.stereotype.Component;
import java.util.Calendar;
import java.util.concurrent.TimeUnit;

@Component
@Data
@Slf4j
public class TokenUtils {

    @Autowired
    private StringRedisTemplate stringRedisTemplate;

    // 创建Token
    public String createToken(String userName, String hostIp) {
        //时间工具类
        Calendar instance = Calendar.getInstance();
        //设置过期时间  单位:SECOND秒  3个小时失效
        instance.add(Calendar.SECOND, 3 * 60 * 60);
        //签名(自定义)
        Algorithm algorithm = Algorithm.HMAC256("buliangshuai");
        // 创建token
        JWTCreator.Builder builder = JWT.create()
                //添加键值对数据
                .withClaim("userName", userName)
                //添加过期时间
                .withExpiresAt(instance.getTime());
        // 选择签名算法HMAC256,添加密钥字符串签名
        String token = builder.sign(algorithm);
        //输出token
        System.out.println("用户" + userName + "的token是:" + token);
        // 将token存入redis
        ValueOperations<String, String> forValue = stringRedisTemplate.opsForValue();
        // 存入主机IP和token,指定过期时间
        forValue.set(hostIp+"token", token, 3 * 60 * 60, TimeUnit.SECONDS);
        return token;
    }

    // 验证Token
    public boolean verifyToken(String token, String hostIp) {
        try {
            // 根据主机地址和redis中存储的值比对判断token是否正确
            String redisToken = stringRedisTemplate.boundValueOps(hostIp + "token").get();
            if(!token.equals(redisToken)){
                return false;
            }
        } catch (TokenExpiredException e) {
            //令牌过期抛出异常
            System.out.println("令牌过期");
            return false;
        } catch (Exception e) {
            //token非法验证失败抛出异常
            System.out.println("检验失败");
            return false;
        }
        return true;
    }

   // 解密token
    public String decodeToken(String token){  
        String userName = JWT.require(Algorithm.HMAC256("buliangshuai")).build().verify(token).getClaim("userName").asString();
        return userName;
    }
}

2、编写token接口控制类

import com.blywl.common.utils.TokenUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;

@RestController
@RequestMapping("/test")
@Slf4j
@CrossOrigin // 跨域
public class TestController {
    @Autowired
    private TokenUtils tokenUtils;

    // 创建token
    @PostMapping("/token")
    public String createToken(@RequestParam("userName") String userName, HttpServletRequest request){
        return tokenUtils.createToken(userName, request.getRemoteAddr());
    }

    // 验证token
    @PostMapping("/verifyToken")
    public boolean verifyToken(@RequestParam("token") String token, HttpServletRequest request){
        return tokenUtils.verifyToken(token, request.getRemoteAddr());
    }
}

 3、前端api调用

import axios from 'axios'

let hostIp= "http://127.0.0.1:"
export default {
    // 生成用户Token
    createToken(data) {
        return axios({
            url: hostIp + '8080/test/token',
            params: data,
            method: 'post'
        })
    }

}

四、随机验证码

1、验证码工具类codeUtils

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

/**
 * code验证码生成工具类
 */
public class CodeUtils {
    /**
     * 生成验证码图片的宽度
     */
    private int width = 100;

    /**
     * 生成验证码图片的高度
     */
    private int height = 30;

    /**
     * 字符样式
     */
    private String[] fontNames = { "宋体", "楷体", "隶书", "微软雅黑" };

    /**
     * 定义验证码图片的背景颜色为白色
     */
    private Color bgColor = new Color(255, 255, 255);

    /**
     * 生成随机
     */
    private Random random = new Random();

    /**
     * 定义code字符
     */
    private String codes = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

    /**
     * 记录随机字符串
     */
    private String text;

    /**
     * 获取一个随意颜色
     * @return
     */
    private Color randomColor() {
        int red = random.nextInt(150);
        int green = random.nextInt(150);
        int blue = random.nextInt(150);
        return new Color(red, green, blue);
    }

    /**
     * 获取一个随机字体
     *
     * @return
     */
    private Font randomFont() {
        String name = fontNames[random.nextInt(fontNames.length)];
        int style = random.nextInt(4);
        int size = random.nextInt(5) + 24;
        return new Font(name, style, size);
    }

    /**
     * 获取一个随机字符
     *
     * @return
     */
    private char randomChar() {
        return codes.charAt(random.nextInt(codes.length()));
    }

    /**
     * 创建一个空白的BufferedImage对象
     *
     * @return
     */
    private BufferedImage createImage() {
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics2D g2 = (Graphics2D) image.getGraphics();
        //设置验证码图片的背景颜色
        g2.setColor(bgColor);
        g2.fillRect(0, 0, width, height);
        return image;
    }

    public BufferedImage getImage() {
        BufferedImage image = createImage();
        Graphics2D g2 = (Graphics2D) image.getGraphics();
        StringBuffer sb = new StringBuffer();
        for (int i = 0; i < 4; i++) {
            String s = randomChar() + "";
            sb.append(s);
            g2.setColor(randomColor());
            g2.setFont(randomFont());
            float x = i * width * 1.0f / 4;
            g2.drawString(s, x, height - 8);
        }
        this.text = sb.toString();
        drawLine(image);
        return image;
    }

    /**
     * 绘制干扰线
     *
     * @param image
     */
    private void drawLine(BufferedImage image) {
        Graphics2D g2 = (Graphics2D) image.getGraphics();
        int num = 5;
        for (int i = 0; i < num; i++) {
            int x1 = random.nextInt(width);
            int y1 = random.nextInt(height);
            int x2 = random.nextInt(width);
            int y2 = random.nextInt(height);
            g2.setColor(randomColor());
            g2.setStroke(new BasicStroke(1.5f));
            g2.drawLine(x1, y1, x2, y2);
        }
    }

    public String getText() {
        return text;
    }

    public static void output(BufferedImage image, OutputStream out) throws IOException {
        ImageIO.write(image, "JPEG", out);
    }
}

2、编写验证码接口控制类

import com.blywl.common.utils.CodeUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.data.redis.core.ValueOperations;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.concurrent.TimeUnit;

@RestController
@RequestMapping("/login")
@CrossOrigin // 跨域
public class LoginController {

    @Autowired
    private StringRedisTemplate stringRedisTemplate;

    /**
     * 生成验证码图片
     */
    @GetMapping("/code")
    public void code(HttpServletRequest request, HttpServletResponse res) throws IOException {
        CodeUtils code = new CodeUtils();
        // 生成验证码图片
        BufferedImage image = code.getImage();
        // 将验证码text存入redis中
        String text = code.getText();
        ValueOperations<String, String> forValue = stringRedisTemplate.opsForValue();
        String hostIp = request.getRemoteAddr() + "code";
        // 主机,code,3分钟过期
        forValue.set(hostIp, text, 3 * 60, TimeUnit.SECONDS);
        // 响应验证码图片
        CodeUtils.output(image, res.getOutputStream());
    }

    /**
     * 登录
     */
    @PostMapping("/login")
    public String login(@RequestParam("code") String code, HttpServletRequest request) {
        // 根据主机地址和redis中存储的值比对判断验证码是否正确
        String hostIp = request.getRemoteAddr() + "code";
        String redisCode = stringRedisTemplate.boundValueOps(hostIp).get();
        System.out.println("redisValue:" + redisCode);
        if (code.equalsIgnoreCase(redisCode)) {
            return "登录成功!";
        }
        return "登录失败~";
    }

}

3、前端api调用

// 登录
async login(data) {
    return axios({
        url: hostIp + '8080/login/login',
        params: data,
        method: 'post'
    })
},

SpringBoot整合jwt+redis+随机验证码+Vue的登录功能文章来源地址https://www.toymoban.com/news/detail-496306.html

 五、完整前端代码

Login.vue

<template>
  <div class="login">
    <!-- 卡片 -->
    <el-card class="box-card">
      <h1 style="margin: 0 0 14px 100px">登录页面</h1>
      <!-- 登录 or 注册 -->
      <el-radio-group v-model="labelPosition" class="radioGroup" size="small">
        <el-radio-button label="login">登录</el-radio-button>
        <el-radio-button label="signIn">注册</el-radio-button>
      </el-radio-group>
      <!-- user输入表单 -->
      <el-form label-position="right" label-width="80px" :model="user">
        <el-form-item
            label="用户名"
            prop="name"
            :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' } ]">
          <el-input v-model="user.name"></el-input>
        </el-form-item>
        <el-form-item
            label="密码"
            prop="password"
            :rules="[ { required: true, message: '请输入密码', trigger: 'blur' } ]">
          <el-input type="password" v-model="user.password" show-password></el-input>
        </el-form-item>
        <el-form-item
            v-if="labelPosition==='signIn'"
            label="确认密码"
            prop="checkPassword"
            :rules="[ { required: true, message: '请输入再次输入密码', trigger: 'blur' } ]">
          <el-input type="password" v-model="user.checkPassword" show-password></el-input>
        </el-form-item>
        <el-form-item
            label="验证码"
            prop="code"
            :rules="[ { required: true, message: '请输入验证码', trigger: 'blur' } ]">
          <el-input v-model="user.code" style="width: 120px"></el-input>
          <el-image class="codeImg" :src="imgUrl" style="cursor: pointer" @click="resetImg"></el-image>
        </el-form-item>
        <!--按钮-->
        <el-form-item class="button">
          <el-button class="button1" v-if="labelPosition==='login'" type="warning" @click="login"
                     :disabled="user.name===''||user.password===''||user.code===''" >登录
          </el-button>
          <el-button class="button1" v-if="labelPosition==='signIn'" type="warning" @click="signIn"
                     :disabled="user.name===''||user.password===''||user.checkPassword===''||user.code===''">注册
          </el-button>
          <el-button class="button1" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import logApi from "../assets/api/loginApi"

export default {
  name: "Login",
  data() {
    return {
      labelPosition: 'login',  // 开始先定位到登录
      // 用户数据
      user: {
        name: '',
        password: '',
        checkPassword: '',
        code: ''  // 验证码
      },
      imgUrl: '',
    }
  },
  // 创建周期函数
  created() {
    // 获取验证码图片
    this.imgUrl = this.$axios.defaults.baseURL + "8080/login/code"
  },
  methods: {
    // 登录
    login() {
      // 生成token并存储在浏览器内存中(可以使用localStorage.getItem('token'))查看token)
       logApi.createToken({"userName": this.user.name}).then( r =>
           localStorage.setItem("token", r.data)
      )
      // 验证码校验
      logApi.login({"code": this.user.code,}).then( r =>
          this.$message.info(r.data)
      )
    },
    // 注册
    signIn() {
      if (this.user.checkPassword !== this.user.password) {
        this.$message.error("两次输入的密码不一致!")
      }
    },
    // 点击刷新验证码图片
    resetImg(){
      this.imgUrl = this.$axios.defaults.baseURL + "8080/login/code?time="+new Date();
    },
    // 重置表单
    resetForm() {
      this.user.name = ""
      this.user.password = ""
      this.user.checkPassword = ""
    }
  }
}
</script>

<style>
.login{
    width: 100%;
    height: 100%;
    /*position: fixed;*/
    /*background-image: url(~@/assets/images/login.png);*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
}
.box-card {
    width: 370px;
    margin: 5% auto auto auto;
    border: 1px solid #1f808c;
}
.radioGroup{
    width: 100%;
    margin: 0 0 10px 120px;
}
.codeImg{
    width: 120px;
    height: 35px;
    position: relative;
    top: 13px;
    left: 10px;
    border: 1px solid #b7b7b7;
}
.button{
    width: 100%;
    margin: 0 0 0 -25px;
}
.button1{
    width: 120px;
}

</style>

loginApi.js

import axios from 'axios'

let hostIp= "http://127.0.0.1:"
export default {
    // 登录
    async login(data) {
        return axios({
            url: hostIp + '8080/login/login',
            params: data,
            method: 'post'
        })
    },

    // 生成用户Token
    createToken(data) {
        return axios({
            url: hostIp + '8080/test/token',
            params: data,
            method: 'post'
        })
    }

}

到了这里,关于SpringBoot整合jwt+redis+随机验证码+Vue的登录功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【项目功能模块拆分】SpringBoot+vue实现登录图片验证码

    要在Spring Boot和Vue中实现登录时的图片验证码功能,可以按照以下步骤进行操作: 后端(Spring Boot)实现: 添加相关依赖:在 pom.xml文件中添加以下依赖: 创建一个验证码生成器:创建一个CaptchaGenerator类,用于生成验证码图片。 创建一个REST API接口:创建一个 CaptchaControlle

    2024年02月11日
    浏览(35)
  • 【项目功能模块拆分】SpringBoot+vue实现登录手机验证码

    要在Spring Boot和Vue中实现登录需要手机验证码功能,你需要进行以下步骤: 后端(Spring Boot)实现: 添加相关依赖:在pom.xml文件中添加以下依赖: 创建一个验证码生成器:创建一个 CaptchaGenerator类,用于生成手机验证码。 创建一个REST API接口:创建一个 CaptchaController类,用于

    2024年02月11日
    浏览(38)
  • springboot整合shiro+jwt+redis详解

    三大核心组件:Subject、SecurityManager、Realm Subject 主体,代表了当前 “用户”,这个用户不一定是一个具体的人,与当前应用交互的任何东西都是 Subject,如网络爬虫,机器人等;即一个抽象概念;所有 Subject 都绑定到 SecurityManager,与 Subject 的所有交互都会委托给 SecurityManag

    2023年04月09日
    浏览(45)
  • SpringBoot整合Mybatis-Plus、Jwt实现登录token设置

    Spring Boot整合Mybatis-plus实现登录常常需要使用JWT来生成用户的token并设置用户权限的拦截器。本文将为您介绍JWT的核心讲解、示例代码和使用规范,以及如何实现token的生成和拦截器的使用。 一、JWT的核心讲解 JWT(JSON Web Token)是一种基于JSON的,用于在网络上安全传输信息的

    2024年02月02日
    浏览(70)
  • 04 动力云客之登录后获取用户信息+JWT存进Redis+Filter验证Token + token续期

    非常好实现. 只要新建一个controller, 并调用SS提供的Authentication对象即可 未登录状态下可以直接访问 api/login/info吗? 不可以. 因为在安全配置类已经写明了, 仅登陆界面允许任何人访问, 其他所有界面都需要认证 由于未写JWT, 默认使用Session 保存会话, ???好像不对 因此只要我们先

    2024年02月21日
    浏览(62)
  • 手把手教你制作登录、注册界面 SpringBoot+Vue.js(cookie的灵活运用,验证码功能)

    实现思路:用户在界面输入用户名和密码传入变量。用post方法传输到后端,后端接收整个实体对象。将用户名提取出。在dao层方法中通过select注解查询,返回数据库对应的数据对象。如果返回为空则return false。不为空则通过比对数据库返回的密码和用户输入的密码,如果二者

    2024年02月03日
    浏览(57)
  • 【万字长文】SpringBoot整合SpringSecurity+JWT+Redis完整教程(提供Gitee源码)

    前言:最近在学习SpringSecurity的过程中,参考了很多网上的教程,同时也参考了一些目前主流的开源框架,于是结合自己的思路写了一个SpringBoot整合SpringSecurity+JWT+Redis完整的项目,从0到1写完感觉还是收获到不少的,于是我把我完整的笔记写成博客分享给大家,算是比较全的

    2024年02月15日
    浏览(39)
  • 前后端分离,使用vue3整合SpringSecurity加JWT实现登录校验

    前段时间写了一篇spring security的详细入门,但是没有联系实际。 所以这次在真实的项目中来演示一下怎样使用springsecurity来实现我们最常用的登录校验。本次演示使用现在市面上最常见的开发方式,前后端分离开发。前端使用vue3进行构建,用到了element-plus组件库、axios封装、

    2024年01月23日
    浏览(57)
  • 一张流程图带你学会SpringBoot结合JWT实现登录功能

    🧑‍💻作者名称:DaenCode 🎤作者简介:啥技术都喜欢捣鼓捣鼓,喜欢分享技术、经验、生活。 😎人生感悟:尝尽人生百味,方知世间冷暖。 📖所属专栏:SpringBoot实战 JWT(JsonWebToken)是 一种轻量级的跨域身份验证解决方案 。通常被用于无状态身份验证机制,将用户信息签名

    2024年02月11日
    浏览(81)
  • SpringBoot + Vue前后端分离项目实战 || 六:Jwt加密整合配置

    在之前的系统中,我们利用 UUID 配合 Redis 以达到角色登录的功能。 当前整个系统存在一个问题:人为 修改token值 后,用户仍然能在前端进行数据库操作,后台没有校验当前用户 token 就允许一些请求,导致系统存在 安全漏洞 。 解决方法: Jwt签名验证 。整合 Jwt 后,前端发

    2024年02月15日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包