springboot中通过jwt令牌校验以及前端token请求头进行登录拦截实战

前言

大家从b站大学学习的项目侧重点好像都在基础功能的实现上,反而一个项目最根本的登录拦截请求接口都不会写,怎么拦截?为什么拦截?只知道用户登录时我后端会返回一个token,这个token是怎么生成的,我把它返回给前端干什么用?前端怎么去处理这个token?这个是我在学习过程中一知半解的,等开始做自己的项目时才知道原来还有这么多不会,本文就来讲解一下怎么去实现登录拦截请求校验的方法。

一、导入数据库表依赖

这里有一张常用的用户表作为本文的实战测试

CREATE TABLE `user` (`id` int(11) NOT NULL AUTO_INCREMENT,`username` varchar(50) NOT NULL COMMENT '用户名',`password` varchar(255) NOT NULL COMMENT '密码',`email` varchar(100) DEFAULT NULL COMMENT '邮箱',`create_time` datetime DEFAULT NULL COMMENT '创建时间',`login_time` datetime DEFAULT NULL COMMENT '最后一次登录时间',`avatar` varchar(255) DEFAULT NULL COMMENT '头像',PRIMARY KEY (`id`),UNIQUE KEY `username` (`username`) USING BTREE,UNIQUE KEY `email` (`email`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=33 DEFAULT CHARSET=utf8mb4 COMMENT='用户表';

运行然后连接。

二、登陆接口实现

@Api(tags = "用户相关接口")
@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserService userService;@Autowiredprivate JwtProperties jwtProperties;@ApiOperation("用户登录")@PostMapping("/login")public Result login(@RequestBody User user) {user = userService.login(user);//登录成功后,生成jwt令牌Map<String, Object> claims = new HashMap<>();claims.put("userId", user.getId());String token = JwtUtil.createJWT(jwtProperties.getUserSecretKey(),jwtProperties.getUserTtl(),claims);UserLoginVo userLoginVo = UserLoginVo.builder().user(user).token(token).build();return Result.okResult(userLoginVo);}@ApiOperation("注册用户")@PostMappingpublic Result addUser(@RequestBody UserDto userDto) {userService.addUser(userDto);return Result.okResult();}@ApiOperation("更新用户信息")@PostMapping("/update")public Result uploadAvatar(User user) {userService.uploadAvatar(user);return Result.okResult();}@GetMapping("/test")public Result test() {return Result.okResult("test");}
}

写了几个常用的用户层接口用来测试,主要关注用户登录/login接口,其他的暂时无需理会。

配置JwtProperties 类

@Component
@ConfigurationProperties(prefix = "zwk.jwt")
@Data
public class JwtProperties {/*** 用户生成jwt令牌相关配置*/private String userSecretKey;private long userTtl;private String userTokenName;}

JwtProperties 对应的配置文件

zwk:jwt:# 设置jwt签名加密时使用的秘钥user-secret-key: zwkzwk# 设置jwt过期时间user-ttl: 7200000# 设置前端传递过来的令牌名称user-token-name: token

配置UserService 类

public interface UserService {void addUser(UserDto userDto);User login(User user);void uploadAvatar(User user);
}

UserService 的实现类

@Service
public class UserServiceImpl implements UserService {@Autowiredprivate UserMapper userMapper;/*** 新增用户* @param userDto*/public void addUser(UserDto userDto) {User user = new User();BeanUtils.copyProperties(userDto, user);//user.setEmail("123@qq.com");user.setCreateTime(new Date());user.setLoginTime(new Date());userMapper.insert(user);}public User login(User user) {String password = user.getPassword();final User user1 = userMapper.getUserByName(user.getUsername());if (user1 == null) {throw new RuntimeException("该用户名不存在");}//对密码进行md5加密//password = DigestUtils.md5DigestAsHex(password.getBytes());if (!password.equals(user1.getPassword())){throw new RuntimeException("密码错误");}return user1;}/*** 更新用户信息* @param user* @return*/@Overridepublic void uploadAvatar(User user) {userMapper.updateById(user);}
}

这里主要是对用户登录时传过来的用户名和密码进行校验,校验通过后我们再重新回到控制层看看是怎么处理的。

 @ApiOperation("用户登录")@PostMapping("/login")public Result login(@RequestBody User user) {user = userService.login(user);//登录成功后,生成jwt令牌Map<String, Object> claims = new HashMap<>();claims.put("userId", user.getId());String token = JwtUtil.createJWT(jwtProperties.getUserSecretKey(),jwtProperties.getUserTtl(),claims);UserLoginVo userLoginVo = UserLoginVo.builder().user(user).token(token).build();return Result.okResult(userLoginVo);}
  • 如果登录成功,代码将生成一个 JWT(JSON Web Token)令牌。JWT 是一种紧凑的、自包含的方式,用于在客户端和服务器之间传递安全信息。在这个例子中,JWT 令牌包含了用户的 ID 信息。
  • claims 是一个 Map,用于存储 JWT 中的声明(Claims),这里存储了用户 ID。
  • JwtUtil.createJWT 方法用于创建 JWT 令牌,它接收三个参数:用户的密钥(jwtProperties.getUserSecretKey())、令牌的有效时间(jwtProperties.getUserTtl())和声明信息(claims)。

导入User类

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User implements Serializable {private static final long serialVersionUID = 1L;/*** 主键*/@TableIdprivate Long id;/*** 用户名*/private String username;private String password;private String email;@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")private Date createTime;@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")private Date LoginTime;/*** 头像*/private String avatar;
}

导入UserLoginVo类

@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class UserLoginVo {private String token;private User user;
}

编写JwtUtil工具类,该类用来生成jwt令牌

public class JwtUtil {/*** 生成jwt* 使用Hs256算法, 私匙使用固定秘钥** @param secretKey jwt秘钥* @param ttlMillis jwt过期时间(毫秒)* @param claims    设置的信息* @return*/public static String createJWT(String secretKey, long ttlMillis, Map<String, Object> claims) {// 指定签名的时候使用的签名算法,也就是header那部分SignatureAlgorithm signatureAlgorithm = SignatureAlgorithm.HS256;// 生成JWT的时间long expMillis = System.currentTimeMillis() + ttlMillis;Date exp = new Date(expMillis);// 设置jwt的bodyJwtBuilder builder = Jwts.builder()// 如果有私有声明,一定要先设置这个自己创建的私有的声明,这个是给builder的claim赋值,一旦写在标准的声明赋值之后,就是覆盖了那些标准的声明的.setClaims(claims)// 设置签名使用的签名算法和签名使用的秘钥.signWith(signatureAlgorithm, secretKey.getBytes(StandardCharsets.UTF_8))// 设置过期时间.setExpiration(exp);return builder.compact();}/*** Token解密** @param secretKey jwt秘钥 此秘钥一定要保留好在服务端, 不能暴露出去, 否则sign就可以被伪造, 如果对接多个客户端建议改造成多个* @param token     加密后的token* @return*/public static Claims parseJWT(String secretKey, String token) {// 得到DefaultJwtParserClaims claims = Jwts.parser()// 设置签名的秘钥.setSigningKey(secretKey.getBytes(StandardCharsets.UTF_8))// 设置需要解析的jwt.parseClaimsJws(token).getBody();return claims;}}

以上就是我们前期准备工作,然后发现好像还是没用,因为我们还没有做自定义拦截处理。我们首先对除了/user/login接口进行放行,其他接口全部拦截。

编写JwtTokenAdminInterceptor 类重写HandlerInterceptor方法

@Component
@Slf4j
public class JwtTokenAdminInterceptor implements HandlerInterceptor {@Autowiredprivate JwtProperties jwtProperties;/*** 校验jwt** @param request* @param response* @param handler* @return* @throws Exception*/public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {//判断当前拦截到的是Controller的方法还是其他资源if (!(handler instanceof HandlerMethod)) {//当前拦截到的不是动态方法,直接放行return true;}//1、从请求头中获取令牌String token = request.getHeader(jwtProperties.getUserTokenName());//2、校验令牌try {log.info("jwt校验:{}", token);Claims claims = JwtUtil.parseJWT(jwtProperties.getUserSecretKey(), token);Long userId = Long.valueOf(claims.get("userId").toString());log.info("当前用户id:{}", userId);//3、通过,放行return true;} catch (Exception ex) {//4、不通过,响应401状态码response.setStatus(401);return false;}}
}

自定义拦截器WebMvcConfiguration

@Configuration
@Slf4j
public class WebMvcConfiguration extends WebMvcConfigurationSupport {@Autowiredprivate JwtTokenAdminInterceptor jwtTokenAdminInterceptor;/*** 注册自定义拦截器* @param registry*/protected void addInterceptors(InterceptorRegistry registry) {log.info("开始注册自定义拦截器...");registry.addInterceptor(jwtTokenAdminInterceptor).addPathPatterns("/user/**")   //表示拦截所以前缀带/user的请求.excludePathPatterns("/user/login");  //排除特定路径:excludePathPatterns("/user/login") 方法用于排除某些路径,//即使它们匹配前面指定的模式。在这个例子中,/user/login 路径不会被 jwtTokenAdminInterceptor 拦截。}/*** 设置静态资源映射* @param registry*/protected void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/doc.html").addResourceLocations("classpath:/META-INF/resources/");registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");}
}

然后对接口进行登录测试

登录测试在这里插入图片描述

{"code": 200,"msg": "操作成功","data": {"token": "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MjA2MDI3NzIsInVzZXJJZCI6MX0.Cf1ew-rPOkRYup5tird7nVD9xiHblNhYHwtdFHGQqV0","user": {"id": 1,"username": "kkk","password": "kkk123","email": "2765314967@qq.com","createTime": "2024-07-10 10:44:36","LoginTime": "2024-07-10 10:44:42","avatar": null,"loginTime": "2024-07-10 10:44:42"}}
}

可以看见,登录成功后我们成功向前端返回token令牌。

那么前端拿到了这个token令牌有什么用呢?

  1. 第一次登录的时候,前端调用后端的登录接口,发送用户名和密码
  2. 后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token
  3. 前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面
  4. 前端每次跳转路由,就判断localStorage中有无token,没有就跳转到登录页面,有则跳转到对应的路由页面
  5. 每次调后端接口,都要在请求头中加token
  6. 后端判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回403,请求头中没有token也返回403
  7. 如果前端拿到状态码为403,就清除token信息并跳转到登录页面

这个时候我们再来测试其他接口,应为我们刚刚只放行了/user/login接口,其他接口是一律拦截的,我们看看直接请求会发生什么。
在这里插入图片描述
可以发现,当我们请求这个测试接口时,返回状态码401,和我们预想的一样,如图,就是我们刚刚写的JwtTokenAdminInterceptor
在这里插入图片描述
在这里插入图片描述
然后发现控制台的jwt为空,这就应对了我们前面所说的,当我们将token返回给前端之后,前端之后的每次请求都会把token携带到到请求头header里面传给后端,我们后端就可以通过HttpServletRequest获取请求头token,如图:在这里插入图片描述
然后根据我们后端自定义的拦截器看看是否需要对这个请求头进行判断,如果不需要判断,直接放放行,否则进行jwt校验。
那我们再次回到刚刚/user/test接口,我们刚刚也是由前端对该接口进行请求,但这个时候前端请求头里面的token为空,我们后端又对这个接口进行了拦截,所以校验自然失败,无法访问,这个时候我们再把登录时生成的token放在前端传给侯丹的请求头里,看看会发生什么.
在这里插入图片描述
在这里插入图片描述
可以看到,这个时候就能成功请求。再看看控制台
在这里插入图片描述
可以发现,后端拿到前端传过来的token后校验通过,并且还可以通过token获取用户id,我们再回过头看看最开始的问题,这个token有什么用,这个通过token获取用户id就是最明显的体现之一。
我们只需要通过在这里插入图片描述

Claims claims = JwtUtil.parseJWT(jwtProperties.getUserSecretKey(), token);Long userId = Long.valueOf(claims.get("userId").toString());

我讲的也不是很清楚,建议大家细看JwtTokenAdminInterceptorWebMvcConfiguration这两个类,方可大成。
等我我后续大成后再重新回来更新。

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

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

相关文章

Matlab中collectPlaneWave函数的应用

查看文档如下&#xff1a; 可以看出最多5个参数&#xff0c;分别是阵列对象&#xff0c;信号幅度&#xff0c;入射角度&#xff0c;信号频率&#xff0c;光速。 在下面的代码中&#xff0c;我们先创建一个3阵元的阵列&#xff0c;位置为&#xff1a;&#xff08;-1,0,0&#x…

项目管理工具评测:2024年国内外最顶级的10款项目管理工具排行

国内外涌现出众多优秀的项目管理工具&#xff0c;它们各自在功能、易用性、集成能力等方面展现出独特优势。以下是国内外顶级的10款项目管理工具&#xff1a; 一、进度猫 推荐理由&#xff1a;进度猫以其直观的任务管理和进度跟踪功能&#xff0c;成为许多团队和项目的首选…

javaweb学习day4--《maven篇》maven的项目创建及其依赖管理详解(基于最新版本的idea)

一、前言 javaweb学习的第四天&#xff0c;不知道今天你们是否坚持下去了。今天学习到的是maven&#xff0c;温馨提示一下&#xff0c;idea中自带maven不用自行去下载了。前期的配置工作太过复杂了&#xff0c;小编感觉自己能力有限并不能将其讲的太清楚&#xff0c;还请大家在…

PlugLink的技术架构实例解析(附源码)

在探讨PlugLink这一开源应用的实际应用与技术细节时&#xff0c;我们可以从其构建的几个核心方面入手&#xff0c;结合当前AI编程的发展趋势&#xff0c;为您提供既有实例又有深度解析的内容。 PlugLink的技术架构实例解析 前端技术选型 —— layui框架&#xff1a; PlugLi…

maven——(重要)手动创建,构建项目

创建项目 手动按照maven层级建好文件夹&#xff0c;并写上java&#xff0c;测试代码和pom文件 构建项目 在dos窗口中执行如下命令 compile编译 当前maven仓库中什么都没有。 在pom所在层级下&#xff0c;执行&#xff1a; mvn compile 就开始显示下面这些&#xff0c;…

MQTT是什么,物联网

写文思路&#xff1a; 以下从几个方面介绍MQTT&#xff0c;包括&#xff1a;MQTT是什么&#xff0c;MQTT和webSocket的结合&#xff0c;以及使用场景&#xff0c; 一、MQTT是什么 MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级的发布/订阅消息…

JavaScript(7)——数组

JavaScript中数组的用法与Java差不多&#xff0c;但还是有一些区别 声明数组 语法: let 数组名 [数据1,数据2,数据...] let arr new Array(数据1,数据2,...数据n) 添加数据 数组.push()方法将一个或多个元素添加到数组末尾&#xff0c;并返回该数组新长度 <script>…

[k8s源码]1.client-go集群外部署

client-go是由k8s发布且维护的专门用于开发者和kubernetes交互的客户端库。它支持对k8s资源的CRUD操作&#xff08;create、read、update、delete&#xff09;&#xff0c;事件监听和处理&#xff0c;访问kubernetes集群的上下文和配置。 client go是独立于kubernetes集群之外…

SpringBoot项目架构实战之“网关zuul搭建“

第三章 网关zuul搭建 前言&#xff1a; 1、主要功能 zuul主要提供动态路由&#xff08;内置ribbon实现&#xff09;和过滤&#xff08;可以做统一鉴权过滤器、灰度发布过滤器、黑白名单IP过滤器、服务限流过滤器&#xff08;可以配合Sentinel实现&#xff09;&#xff09;功能…

css简单易懂的加载动画,看不会算我输好吧

效果展示 步骤 第一阶段 先准备结构&#xff0c;并且放置12个div&#xff0c;每一个div旋转30*n度&#xff0c; 做一个圆圈 dom <div class"modal"><div class"loading"><div class"item1"></div><div class&quo…

Vue 项目中 history 路由模式的使用

在最近帮客户开发的一个项目中&#xff0c;由于项目的特殊性&#xff0c;需要用到 Vue 中的 history路由模式。该模式使用时会涉及到“上传白屏”和“刷新 404 问题”。在帮助客户解决这两个问题的过程中&#xff0c;总结问题的解决方案并记录下来&#xff0c;希望能够保留这篇…

分布式训练

一、分布式计算 跟多GPU不同是&#xff1a;数据不是从主存拿的&#xff0c;是在分布式文件系统拿的&#xff0c;有多个工作站&#xff0c;工作站中有多个GPU&#xff0c;通过网络读取数据到GPU中&#xff0c;GPU通过网络接收到来自参数服务器的参数进行运算计算梯度&#xff0c…

怎样免费在线文字转语音?5个配音工具一键包揽

日常在享受有声读物的乐趣时&#xff0c;不知道大家是否也曾渴望将手中的精彩文本以生动的声音演绎出来&#xff1f; 无论是为了自我沉浸&#xff0c;还是为家人朋友创造独特的听觉盛宴&#xff0c;一款支持文本转语音的配音软件都能成为你的得力助手。它不仅能让文字跃然耳边…

【C++深度探索】全面解析多态性机制(一)

hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#xff1a;大耳朵土土垚的博客 &#x1…

演唱会售票系统(Springboot+MySQL+Mybatis+BootStrap)

本演唱会售票系统结合了多个流行的技术栈&#xff0c;提供了全面的功能模块&#xff0c;包括用户和管理员两个角色。前端采用Bootstrap框架设计响应式界面&#xff0c;后端采用Spring Boot和MyBatis Plus实现业务逻辑和数据库操作&#xff0c;Sa-Token确保系统的安全性。通过这…

深入分析与解决4.3问题:iOS应用版本更新审核被拒原因解析

深入分析与解决4.3问题&#xff1a;iOS应用版本更新审核被拒原因解析 在iOS应用开发和发布过程中&#xff0c;遇到4.3问题&#xff08;设计 - 垃圾邮件&#xff09;是一个常见且令人头疼的情况。即使您的应用已成功发布其第一个版本&#xff0c;但在进行版本更新时&#xff0c…

【机器学习】初学者经典案例(随记)

&#x1f388;边走、边悟&#x1f388;迟早会好 一、概念 机器学习是一种利用数据来改进模型性能的计算方法&#xff0c;属于人工智能的一个分支。它旨在让计算机系统通过经验自动改进&#xff0c;而不需要明确编程。 类型 监督学习&#xff1a;使用带标签的数据进行训练&…

队列+二叉树广度优先

题目出自力扣-n叉树的层序遍历 我是原始人&#xff0c;递归写出一道题就只有递归思路&#xff0c;开始的想法是写深搜函数&#xff0c;传一个随着层数递增的int参数q&#xff0c;节点空就return&#xff0c;否则遍历所有节点&#xff0c;每个子节点又以q1为层数递归&#xff…

C++ | Leetcode C++题解之第226题翻转二叉树

题目&#xff1a; 题解&#xff1a; class Solution { public:TreeNode* invertTree(TreeNode* root) {if (root nullptr) {return nullptr;}TreeNode* left invertTree(root->left);TreeNode* right invertTree(root->right);root->left right;root->right …

js字符串文字添加不同颜色,replace的妙用$1...$9

更改字符串第一个数字为红色显示&#xff0c;第二个数字为黄色显示 $1匹配的是正则第一个括号选中的字符串&#xff0c;可以使用正则不断用括号匹配然后更改样式 const testStr "剩余12个名额&#xff0c;截止时间12月25日" testStr this.testStr.replace(/(\d)(\D…