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 {

    @Autowired
    private UserService userService;

    @Autowired
    private 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("注册用户")
    @PostMapping
    public 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 {

    @Autowired
    private 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
     */
    @Override
    public 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;

    /**
     * 主键
     */
    @TableId
    private 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的body
        JwtBuilder 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) {
        // 得到DefaultJwtParser
        Claims 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 {

    @Autowired
    private 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 {

    @Autowired
    private 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令牌有什么用呢？

第一次登录的时候，前端调用后端的登录接口，发送用户名和密码
后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token
前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面
前端每次跳转路由，就判断localStorage中有无token，没有就跳转到登录页面，有则跳转到对应的路由页面
每次调后端接口，都要在请求头中加token
后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回403，请求头中没有token也返回403
如果前端拿到状态码为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());

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