当前位置: 首页 > ds >正文

项目1其二(验证码、jwt)

分析需求:1、验证码 2、登录验证jwt

一、验证码
我们采用将验证码存到redis的方式进行前后端数据验证
如何做一个redis呢。
1、RedisTemplate<Object, Object>这种类型的模板是不需要手动注册到容器里的
2、因此在Api里直接注入后,进行接口的编写即可

@GetMappingpublic void captcha(String id, HttpServletRequest req, jakarta.servlet.http.HttpServletResponse resp) throws IOException {SpecCaptcha captcha = new SpecCaptcha(140, 40, 4);resp.setContentType("image/gif");resp.setHeader("Pragma", "No-cache");resp.setHeader("Cache-Control", "no-cache");resp.setDateHeader("Expires", 0);//req.getSession().setAttribute("captcha", captcha.text().toLowerCase());redisTemplate.opsForValue().set("captcha-" + id, captcha.text().toLowerCase(), Duration.ofMinutes(3));captcha.out(resp.getOutputStream());}

前端可以通过:captchaUrl.value = “/api/captcha?id=” + captchaId.value;
通过el-image进行渲染

二、jwt
1、jwt生成工具

public static String createJwt(String username, String id, Map<String, Object> payloads, LocalDateTime expireTime, String secretKey) {JWTCreator.Builder builder = JWT.create();String jwt = builder.withPayload(payloads).withExpiresAt(expireTime.toInstant(ZoneOffset.of("+8"))).withIssuer("陈平安").withIssuedAt(Instant.now()).withSubject("用户认证").withAudience(username).withJWTId(id).sign(Algorithm.HMAC256(secretKey));return jwt;}

传给前端jwt即可

2、后端校验
先将之前工具里的参数secretKey写到配置文件里面,通过@Value(“${}”)读取值
定义拦截器

@Component
public class JwtInterceptor implements HandlerInterceptor

重写里面的preHandle用来拦截过来的请求,请求头没有前端给的jwt数据就拒绝
在这里插入图片描述
写好拦截器记得要去配置类里面进行注册
首先注入jwt拦截器,然后进行
在这里插入图片描述
三、前端接收并给后端的请求头上携带jwt
在这里插入图片描述
这里pinia里面就有jwt的值了,后续发送请求头就可以通过下面的axios拦截器进行请求头jwt的携带了
在这里插入图片描述
若前端给的响应里面有新的jwt,这里要及时更新
在这里插入图片描述
这里的token只是后端可能给了个叫token的头数据而已

http://www.xdnf.cn/news/18467.html

相关文章:

  • 《算法导论》第 33 章 - 计算几何学
  • 关于uniappx注意点1 - 鸿蒙app
  • 3ds Max 流体模拟终极指南:从创建到渲染,打造真实液体效果
  • 模拟tomcat接收GET、POST请求
  • 元宇宙的硬件设备:从 VR 头显到脑机接口
  • 【数据库】Oracle学习笔记整理之六:ORACLE体系结构 - 重做日志文件与归档日志文件(Redo Log Files Archive Logs)
  • Navicat Premium v17.2.3
  • Advanced Math Math Analysis |01 Limits, Continuous
  • 力扣hot100:最大子数组和的两种高效方法:前缀和与Kadane算法(53)
  • 学习设计模式《二十三》——桥接模式
  • uniapp:h5链接拉起支付宝支付
  • 有向图(Directed Graph)和有向无环图(Directed Acyclic Graph,DAG)代码实践
  • pcl求平面点云的边界凸包点
  • 池化技术分析
  • GISBox工具:FBX到3DTiles文件转换指南
  • Eclipse 里Mybatis的xml的头部报错
  • 仿真驱动的AI自动驾驶汽车安全设计与测试
  • JVM基础知识总结
  • 深入解析FTP核心术语03
  • PWA》》以京东为例安装到PC端
  • 从二进制固件到人类意识:AI小智开发全记录与技术沉思—— 一个创客的硬件实践与认知边界探索
  • 数据预处理
  • 怎么确定mongodb是不是链接上了?
  • 电脑驱动免费更新? 这款驱动管理工具:一键扫更新,还能备份恢复,小白也会用~
  • 嵌入式音频开发(3)- AudioService核心功能
  • uniapp开发微信小程序自定义导航栏
  • K距离间隔重排字符串 (LeetCode 358) — Swift解法 + 可运行Demo
  • 嵌入式开发学习———Linux环境下网络编程学习(四)
  • 计算机网络基础复习
  • 鸿蒙安卓前端中加载丢帧:ArkWeb分析