JWT整合Springboot

_静水流深
263 阅读9分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情

1、什么是jwt

在介绍JWT之前，我们先来回顾一下利用token进行用户身份验证的流程：

  • 客户端使用用户名和密码请求登录
  • 服务端收到请求，验证用户名和密码
  • 验证成功后，服务端会签发一个token，再把这个token返回给客户端
  • 客户端收到token后可以把它存储起来，比如放到cookie中
  • 客户端每次向服务端请求资源时需要携带服务端签发的token，可以在cookie或者header中携带
  • 服务端收到请求，然后去验证客户端请求里面带着的token，如果验证成功，就向客户端返回请求数据

这种基于token的认证方式相比传统的session认证方式更节约服务器资源，并且对移动端和分布式更加友好。其优点如下：

  • 支持跨域访问：cookie是无法跨域的，而token由于没有用到cookie(前提是将token放到请求头中)，所以跨域后不会存在信息丢失问题
  • 无状态：token机制在服务端不需要存储session信息，因为token自身包含了所有登录用户的信息，所以可以减轻服务端压力
  • 更适用CDN：可以通过内容分发网络请求服务端的所有资料
  • 更适用于移动端：当客户端是非浏览器平台时，cookie是不被支持的，此时采用token认证方式会简单很多
  • 无需考虑CSRF：由于不再依赖cookie，所以采用token认证方式不会发生CSRF，所以也就无需考虑CSRF的防御

而JWT就是上述流程当中token的一种具体实现方式，其全称是JSON Web Token，官网地址：jwt.io/

通俗地说，JWT的本质就是一个字符串，它是将用户信息保存到一个Json字符串中，然后进行编码后得到一个JWT token，并且这个JWT token带有签名信息，接收后可以校验是否被篡改，所以可以用于在各方之间安全地将信息作为Json对象传输。JWT的认证流程如下：

  • 首先，前端通过Web表单将自己的用户名和密码发送到后端的接口，这个过程一般是一个POST请求。建议的方式是通过SSL加密的传输(HTTPS)，从而避免敏感信息被嗅探
  • 后端核对用户名和密码成功后，将包含用户信息的数据作为JWT的Payload，将其与JWT Header分别进行Base64编码拼接后签名，形成一个JWT Token，形成的JWT Token就是一个如同lll.zzz.xxx的字符串
  • 后端将JWT Token字符串作为登录成功的结果返回给前端。前端可以将返回的结果保存在浏览器中，退出登录时删除保存的JWT Token即可
  • 前端在每次请求时将JWT Token放入HTTP请求头中的Authorization属性中(解决XSS和XSRF问题)
  • 后端检查前端传过来的JWT Token，验证其有效性，比如检查签名是否正确、是否过期、token的接收方是否是自己等等
  • 验证通过后，后端解析出JWT Token中包含的用户信息，进行其他逻辑操作(一般是根据用户信息得到权限等)，返回结果

img

2、为什么要用JWT

2.1 传统Session认证的弊端

我们知道HTTP本身是一种无状态的协议，这就意味着如果用户向我们的应用提供了用户名和密码来进行用户认证，认证通过后HTTP协议不会记录下认证后的状态，那么下一次请求时，用户还要再一次进行认证，因为根据HTTP协议，我们并不知道是哪个用户发出的请求，所以为了让我们的应用能识别是哪个用户发出的请求，我们只能在用户首次登录成功后，在服务器存储一份用户登录的信息，这份登录信息会在响应时传递给浏览器，告诉其保存为cookie，以便下次请求时发送给我们的应用，这样我们的应用就能识别请求来自哪个用户了，这是传统的基于session认证的过程

img

然而，传统的session认证有如下的问题：

  • 每个用户的登录信息都会保存到服务器的session中，随着用户的增多，服务器开销会明显增大

  • 由于session是存在与服务器的物理内存中，所以在分布式系统中，这种方式将会失效。虽然可以将session统一保存到Redis中，但是这样做无疑增加了系统的复杂性，对于不需要redis的应用也会白白多引入一个缓存中间件

  • 对于非浏览器的客户端、手机移动端等不适用，因为session依赖于cookie，而移动端经常没有cookie

  • 因为session认证本质基于cookie，所以如果cookie被截获，用户很容易收到跨站请求伪造攻击。并且如果浏览器禁用了cookie，这种方式也会失效

  • 前后端分离系统中更加不适用，后端部署复杂，前端发送的请求往往经过多个中间件到达后端，cookie中关于session的信息会转发多次

  • 由于基于Cookie，而cookie无法跨域，所以session的认证也无法跨域，对单点登录不适用

2.2 JWT认证的优势

对比传统的session认证方式，JWT的优势是：

  • 简洁：JWT Token数据量小，传输速度也很快
  • 因为JWT Token是以JSON加密形式保存在客户端的，所以JWT是跨语言的，原则上任何web形式都支持
  • 不需要在服务端保存会话信息，也就是说不依赖于cookie和session，所以没有了传统session认证的弊端，特别适用于分布式微服务
  • 单点登录友好：使用Session进行身份认证的话，由于cookie无法跨域，难以实现单点登录。但是，使用token进行认证的话， token可以被保存在客户端的任意位置的内存中，不一定是cookie，所以不依赖cookie，不会存在这些问题
  • 适合移动端应用：使用Session进行身份认证的话，需要保存一份信息在服务器端，而且这种方式会依赖到Cookie（需要 Cookie 保存 SessionId），所以不适合移动端

3、JWT结构

JWT由3部分组成：标头(Header)、有效载荷(Payload)和签名(Signature)。在传输的时候，会将JWT的3部分分别进行Base64编码后用.进行连接形成最终传输的字符串

4、JWT项目中的使用

4.1、首先引入JWT的依赖

    <!-- JWT -->
    <dependency>
      <groupId>com.auth0</groupId>
      <artifactId>java-jwt</artifactId>
      <version>3.10.3</version>
    </dependency>

4.2、编写token工具类

@Component
public class TokenUtils {

  private static IUserService staticUserService;

  @Resource
  private IUserService userService;

  @PostConstruct
  public void setUserService() {
    staticUserService = userService;
  }

  /**
   * 生成token
   * @param userId 用户id
   * @param sign 签名
   * @return 加密字符串
   */
  public static String genToken(String userId, String sign) {
    return JWT.create().withAudience(userId)  // 将 userid 保存到token里面，作为载何
      .withExpiresAt(DateUtil.offsetHour(new Date(), 2)) // 设置 token 过期时间2小时
      .sign(Algorithm.HMAC256(sign)); // 以password作为token的密钥 
  }

  /**
   * 获取当前用户信息
   * @return user对象
   */
  public static User getCurrentUser() {
    try {
      HttpServletRequest request = ((ServletRequestAttributes) Objects.requireNonNull(RequestContextHolder.getRequestAttributes())).getRequest();
      String token = request.getHeader("token"); // 获取token
      if (StrUtil.isBlank(token)) {
        String userId = JWT.decode(token).getAudience().get(0); // 根据token内容解析出userId
        return staticUserService.getById(Integer.valueOf(userId)); // 查询数据库得到用户信息
      }
    } catch (Exception e) {
      return null;
    }
    return null;
  }

}

4.3、编写JWT拦截器

public class JwtInterceptor implements HandlerInterceptor {

  @Resource
  private IUserService userService;

  @Override
  public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

    // 在请求头中获取token
    String token = request.getHeader("token");

    // 如果不是映射到方法则直接通过
    if (!(handler instanceof HandlerMethod)) {
      return true;
    }

    // 执行认证
    if (StrUtil.isBlank(token)) {
      throw new ServiceException(Constants.CODE_401, "无token，请重新登陆");
    }

    // 获取token中的userId
    String userId;
    try {
      userId = JWT.decode(token).getAudience().get(0);
    } catch (JWTDecodeException jwtDecodeException) {
      throw new ServiceException(Constants.CODE_401, "token验证失败。请重新登陆");
    }

    // 根据token中的userId查询数据库
    User user = userService.getById(userId);
    if (user == null) {
      throw new ServiceException(Constants.CODE_401, "用户不存在，请重新登陆");
    }

    // 用户密码加签验证token
    JWTVerifier jwtVerifier = JWT.require(Algorithm.HMAC256(user.getPassword())).build();
    try {
      jwtVerifier.verify(token); // 验证token
    } catch (JWTDecodeException jwtDecodeException) {
      throw new ServiceException(Constants.CODE_401, "token验证失败，请重新登陆");
    }
    return true;
  }
}

4.4、注入拦截器

@Configuration
public class InterceptorConfig implements WebMvcConfigurer {

  @Override
  public void addInterceptors(InterceptorRegistry registry) {
    registry.addInterceptor(jwtInterceptor())
      .addPathPatterns("/**")  // 拦截所有请求，通过判断token是否合法来决定是否需要登录
      .excludePathPatterns("/user/login", "/user/register", "/**/export", "/**/import");
  }

  @Bean
  public JwtInterceptor jwtInterceptor() {
    return new JwtInterceptor();
  }

}

至此，已完成jwt整合Springboot，接下来详细介绍具体代码

4.5、后端实现

以下代码是service层登陆方法的实现

  • 返回给前端的实体信息
@Data
public class UserDTO {

  private String username;

  private String password;

  private String nickname ;

  private String  avatarUrl;

  private String token;

}
  • service层对登陆方法的具体实现，通过token工具类生成一个token并传递给UserDTO的实体类，返回给前端
 @Override
  public UserDTO login(UserDTO userDTO) {
    User user = getUserInfo(userDTO);
    if (user != null) {
      BeanUtil.copyProperties(user, userDTO, true);
      String token = TokenUtils.genToken(user.getId().toString(), user.getPassword());
      userDTO.setToken(token);
      return userDTO;
    } else {
      throw new ServiceException(Constants.CODE_600, "用户名或密码错误");
    }
  }

4.5、前端实现

前端发起登陆请求后，如果成功，会接收到UserDTO内的实体类信息，我们将其存储在浏览器本地，以下是部分代码

login() {
      this.$refs['userForm'].validate((valid) => {
        if (valid) {  // 表单校验合法
          this.request.post("/user/login", this.user).then(res => {
            console.log(res)
            if(res.code == 200) {
              localStorage.setItem("user",JSON.stringify(res.data)) // 将数据存储到浏览器本地
              this.$message.success("登陆成功");
              this.$router.push("/")
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      });
    }

同时前端在请求其他接口时，后端会做token验证，如果验证未通过，则不能请求成功，同时前端会返回对应的提示，封装了一个简易的请求工具，如下

import axios from 'axios'
import ElementUI from "element-ui";

const request = axios.create({
  baseURL: 'http://localhost:8090/',
  timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
  config.headers['Content-Type'] = 'application/json;charset=utf-8';
  let user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {};
  if (user) {
    config.headers['token'] = user.token;  // 设置请求头
  }
  return config;
}, error => {
  return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
  response => {
    let res = response.data;
    // 如果是返回的文件
    if (response.config.responseType === 'blob') {
      return res
    }
    // 兼容服务端返回的字符串数据
    if (typeof res === 'string') {
      res = res ? JSON.parse(res) : res
    }
    // 权限问题返回异常
    if (res.code === '401') {
      ElementUI.Message({
        message: res.msg,
        type: 'error'
      });
    }
    return res;
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)


export default request

查看浏览器缓存，得到如下信息

{"id":2,"username":"admin","phone":"13915796826","email":"1427774041@qq.cn","token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIyIiwiZXhwIjoxNjcwNjk2NDk0fQ.QgZ_DUKtZWNC4_Px3yVKjb02N2uNmDvvLvfhKaIFQDM"}

至此成功将jwt应用至你的应用程序中！

avatar
文章
阅读
粉丝