flash网站作品欣赏推广赚钱小程序

分析需求：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的头数据而已