前后端分离项目验证码实现

一、验证码实现流程:

1、后端使用工具生成二维码(包括image的字符串和code字符);

2、使用uuid生成唯一的key值,将key和code以键值对的形式存储到redis缓存中,设置过期时间;

3、将image字符串和key值发送给前端,前端将image字符串转换成图片渲染到页面;

4、将用户输入的验证码和接收的key值一起发送给后端;

5、后端使用key从redis中读取code值,(转大小写)进行比对;

6、比对成功执行相关操作,比对失败进行相关操作;

二、代码实现

1、使用 CaptchaUtil 工具类生成二维码,存入 redis 中并返回给前端

@Service
public class CheckCodeServiceImpl implements CheckCodeService {@AutowiredRedisTemplate<String, String> redisTemplate;@Overridepublic CheckCode getCheckCode() {//  150、50为图形的长、宽。 4表示生成4位验证码,2表示干扰线是2位,并放入redisCircleCaptcha circleCaptcha = CaptchaUtil.createCircleCaptcha(150, 50, 4, 2);//code验证码String codeValue = circleCaptcha.getCode();//图片验证码String imageBase64 = circleCaptcha.getImageBase64();//添加文件头部//"data:images/png;base64,"+imageBase64  直接显示String img = "data:images/png;base64," +imageBase64;//生成唯一keyString uuid = UUID.randomUUID().toString();String key = uuid.replace("-", "");//存入redis,并设置过期时间redisTemplate.opsForValue().set(key, codeValue, 3, TimeUnit.MINUTES);//封装返回对象CheckCode checkCode = new CheckCode();checkCode.setCheckImg(img);checkCode.setCheckMessage(key);return  checkCode;}
}

2、前端接收并渲染到页面

//js代码//验证
const checkImg = ref("")const getCheckCode = async()=>{return request.get(`/checkCode/get`)
}//html代码<div class="login_span">验证码:<el-input v-model="user.checkCode" style="width: 210px;height:40px;margin-bottom:30px;" placeholder="Please input" /><el-image style="width: 100px; height: 40px;margin-left: 10px;cursor:pointer;" :src="checkImg" :fit="fit"/>
</div>

3、前端向后端发送校验请求并携带key和验证码

//登录
const user = reactive({username: "",password: "",//输入的验证码checkCode:"",//keycheckMessage:""
})async function(){const {data} = await request.post(`/auth/login`,user)
}

4、后端收到请求,进行校验

    @Overridepublic String login(LoginDto loginDto) {//验证码验证String checkCode = loginDto.getCheckCode();String queryCode = redisTemplate.opsForValue().get(loginDto.getCheckMessage());//统一为小写比较String lowerCaseCheckCode = checkCode.toLowerCase();String lowerCasequeryCode = queryCode.toLowerCase();if(!lowerCaseCheckCode.equals(lowerCasequeryCode)){throw new RuntimeException("验证码错误");}//删除验证码缓存redisTemplate.delete(loginDto.getCheckMessage());//获取认证方法进行认证String username = loginDto.getUsername();LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<User>().eq(User::getUsername, username);User user = userMapper.selectOne(queryWrapper);if(null == user){throw new RuntimeException("用户不存在");}//比较密码String passwordDb = user.getPassword();String password = loginDto.getPassword();boolean matches = passwordEncoder.matches(password, passwordDb);if(!matches){throw new RuntimeException("密码错误");}int id = user.getId();String userid = String.valueOf(id);//生成jwtString jwt = JwtUtils.createJWT(userid);//将用户信息转换成json数据String jsonString = JSON.toJSONString(user);//将用户信息存入redisredisTemplate.opsForValue().set("userId:"+userid,jsonString,30, TimeUnit.MINUTES);//返回给前端令牌return jwt;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/37314.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一、评估代码质量好坏的几个维度

评估代码质量好坏的几个维度 一、代码质量1、可维护性2、灵活性3、简洁性4、可复用性5、可测试性6、可扩展性7、可读性二、编程方法论1、面向对象2、设计原则3、设计模式4、编程规范5、重构三、提高代码质量方法论总结四、简单了解:什么是设计模式五、设计模式的分类六、UML图…

2024年计算机行业投资策略:AI创新推动行业加速发展

2023年,计算机行业在AI创新的推动下呈现出"M"型走势,年初在ChatGPT带动的大模型、AI算力以及行业应用的推动下,板块强势上行,4月和6月分别出现年内高点,其后随着AI、信创等热门板块的调整,指数回调幅度明显。从年初到12月26日,申万计算机指数上涨3.61%,跑赢沪…

阿一网络安全培训中心专门为你准备了一份WScan使用教程

下载地址&#xff1a;https://github.com/chushuai/wscan/releases 版本的选择 Windows就选windows_amd64 Linux就选linux_amd64 mac就选darwin_amd64 下载好后&#xff0c;运行一次exe会生成一个config.yaml文件 把该文件中plugins下面的所有插件的enabled设置为True。&…

数据库使用笔记

1.mysql数据库频繁访问导致连接超时 解决办法一&#xff1a; 优化查询&#xff1a;检查并优化SQL查询语句&#xff0c;减少不必要的数据库调用。增加连接池大小&#xff1a;如果应用程序使用连接池&#xff0c;可以考虑增加连接池的最大连接数。&#xff08;注&#xff1a;不能…

【JavaScript脚本宇宙】从入门到精通:让你的JavaScript项目无坚不摧的测试框架指南

众里寻他千百度&#xff1a;为你的JavaScript项目选择最佳测试框架 前言 本文将对几个常用的JavaScript测试框架进行比较&#xff0c;包括Jest、Mocha、Jasmine、AVA、QUnit和Cypress。每个框架都将从概述、主要特性、安装与配置以及示例代码等方面进行介绍。通过比较这些框架…

Selenium进行Web自动化滚动

在使用Selenium进行Web自动化时&#xff0c;计算页面内的滚动条位置或执行滚动操作通常涉及JavaScript执行。Selenium的WebDriver提供了执行JavaScript代码的功能&#xff0c;这可以用来获取滚动条的位置或滚动到页面上的特定位置。 获取滚动条位置 你可以使用JavaScript的wi…

Nginx网站服务详解(设置并发数、实现不同虚拟主机等)

一、nginx的最大并发数设置已经状态收集模块 [root192 nginx]# cat nginx.conf # For more information on configuration, see: # * Official English Documentation: http://nginx.org/en/docs/ # * Official Russian Documentation: http://nginx.org/ru/docs/user ngin…

单源最短路径问题(Dijstra)

#include<iostream> using namespace std; #define MAX 500 #define INT 999 typedef struct {char vex[MAX];int Edge[MAX][MAX];int vexnum,arcnum; }MGraph; void InitMG(MGraph &MG) {cout<<"输入顶点数和边数&#xff1a;";cin>>MG.vexnu…

SOBEL图像边缘检测器的设计

本项目使用FPGA设计出SOBEL图像边缘检测器&#xff0c;通过分析项目在使用过程中的工作原理和相关软硬件设计进行分析详细介绍SOBEL图像边缘检测器的设计。 资料获取可联系wechat 号&#xff1a;comprehensivable 边缘可定义为图像中灰度发生急剧变化的区域边界,它是图像最基本…

linux中find命令和exec的强大组合用法

如何将 find 命令与 exec 一起使用 Find 是一个已经非常强大的命令&#xff0c;用于根据许多条件搜索文件。exec 命令使您能够处理 find 命令的结果。 我在这里分享的例子只是一瞥。find-exec 命令组合在一起为您提供了在 Linux 命令行中执行操作的无限可能。 find 和 exec 命令…

Llama 3 模型微调的步骤

环境准备 操作系统&#xff1a;Ubuntu 22.04.5 LTS Anaconda3&#xff1a;Miniconda3-latest-Linux-x86_64 GPU&#xff1a; NVIDIA GeForce RTX 4090 24GStep 1. 准备conda环境 创建一个新的conda环境&#xff1a; conda create --name llama_factory python3.11激活刚刚创…

[每周一更]-(第103期):GIT初始化子模块

文章目录 初始化和更新所有子模块分步骤操作1. 克隆包含子模块的仓库2. 初始化子模块3. 更新子模块 查看子模块状态提交子模块的更改处理子模块路径错误的问题 该问题的缘由是因为&#xff1a;在写某些代码的时候&#xff0c;仓库中有些文件夹&#xff0c;只提交了文件夹名称到…

Spring Boot中的依赖注入详解

Spring Boot中的依赖注入详解 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在今天的文章中&#xff0c;我们将深入探讨Spring Boot中的依赖注入&#xff08;D…

EasyExcel 导出批注信息以及背景色

1. 批注信息 package com.xxx.demo;import lombok.Getter; import org.apache.poi.ss.usermodel.IndexedColors;/*** This class represents the comment information associated with a specific cell in an Excel sheet.* The columnIndex field specifies the column numbe…

react中自定义上传文件的hook

react中自定义上传文件的hook 在React中&#xff0c;你可以创建自定义Hook来处理文件上传的逻辑。自定义Hook允许你将组件逻辑提取到可重用的函数中&#xff0c;这样你就可以在不同的组件之间共享这些逻辑。 以下是一个简单的示例&#xff0c;展示了如何创建一个用于文件上传…

[GIS]WPS地理处理服务

在GeoServer中&#xff0c;WPS&#xff08;Web Processing Service&#xff09;是一个用于执行地理空间数据处理的规范。WPS服务允许用户提交地理处理请求&#xff0c;这些请求由服务器上的地理处理过程&#xff08;GeoProcessing Process&#xff09;执行&#xff0c;并返回结…

时常在面试中被问到的多线程问题:下篇

文章目录 线程和线程池有什么区别&#xff1f;线程池 (ThreadPool)区别 如何创建线程池&#xff1f;1. 固定大小线程池 (Fixed Thread Pool)2. 可缓存线程池 (Cached Thread Pool)3. 单线程线程池 (Single Thread Pool)4. 定时线程池 (Scheduled Thread Pool) 推荐使用哪种方式…

【贪心】个人练习-Leetcode-2271. Maximum White Tiles Covered by a Carpet

题目链接&#xff1a;https://leetcode.cn/problems/maximum-white-tiles-covered-by-a-carpet/description/ 题目大意&#xff1a;给定一个左右区间序列tiles[][]&#xff0c;每个元素代表这个区间被瓷砖覆盖&#xff08;左右都是闭合的&#xff09;。给定一块毯子&#xff0…

使用 Ubuntu x86_64 平台交叉编译适用于 Linux aarch64(arm64) 平台的 QT5(包含OpenGL/WebEngine支持) 库

使用 Ubuntu AMD64 平台交叉编译适用于 Linux ARM64 平台的 QT5(包含 OpenGL/WebEngine 支持) 库 目录 使用 Ubuntu AMD64 平台交叉编译适用于 Linux ARM64 平台的 QT5(包含 OpenGL/WebEngine 支持) 库写在前面前期准备编译全流程1. 环境搭建2. 复制源码包并解压&#xff0c;创…

PrestaShop的目录结构详解

admin-dev&#xff1a;这个目录通常包含开发和测试PrestaShop后台时所需的脚本和配置文件。例如&#xff0c;它可能包含用于测试API的脚本或用于在开发过程中快速访问某些后台功能的快捷方式。 app&#xff1a;这个目录是PrestaShop的核心&#xff0c;包含了许多关键的组件。例…