JWT代码实现

什么是 JWT？

JSON Web Token，通过数字签名的方式，以 JSON 对象为载体，在不同的服务终端之间安全的传输信息。(将信息进行封装，以 JSON 的形式传递) JWT 有什么用? JWT 最常见的场景就是授权认证，一旦用户登录，后续每个请求都将包含 JWT，系统在每次处理用户请求的之前，都要先进行 JWT 安全校验，通过之后再进行处理。

前后端传输数据时，一般是使用 session 或是 cookie，但是都相对有自己的弊端，JWT 是利用 token 来对用户身份进行验证的方式，具体流程是前端使用用户名和密码来登录，服务器收到请求后验证用户名和密码，验证成功后，服务器会签发一个 token ，将 token 返回给前端，前端将收到的 token 存储起来，在每次请求资源时都必须携带 token，服务器收到请求，会先验证 token 是否有效，验证成功就给前端返回请求的数据。

优势

这种基于 token 的认证方式相对于传统的 session 认证方式更节约服务器资源，token 在服务端不需要存储 session 信息，因为 token 自身包含了所有登录用户的信息，所有可以减轻服务端压力。

JWT 的组成 JWT 由 3 部分组成，用.拼接

eyJ0eXAiOiJqd3QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6InRvbSIsInJvbGUiOiJhZG1pbiI
sInN1YiI6ImFkbWluLXRlc3QiLCJleHAiOjE2NjU1NTAzNDIsImp0aSI6IjBiOWU3MmRmLTQ0NjQtNDV
kYy04ODMwLWU3NTJkMjg1OGQ0MCJ9.00-RQiPM_a9_0q03CrmcrOBMaLbcfWw85Mbc7xc4AtU

这三部分分别是：

Header

包含token 类型和加密算法的名称

{
//类型
'typ': 'jwt',
//算法
'alg': 'HS256'
}

将信息进行base64编码（转码）

Payload //载荷（存储有效信息）

包含标准中注册的声明、公共的声明、私有的声明，其实就是信息安全的分类，存储主要的信息同时也需要将信息进行base64编码（转码）

{
"sub": '1234567890',
"name": 'john',
"amdin":true
}

Signature //签名

将转码后的 header 和 payload 用.进行拼接之后再用使用 HS256 进行加盐加密，就构成了 jwt 的第三部分

其实就是由转码后的 header 和 payload 进行再次加密后的数据

//对转码后的 Header 和 Payload 用.进行拼接
var encodedString = base64UrlEncode(header) + "." + base64UrlEncode(payload);
//使用 HS256 进行加盐加密
var signature = HMACSHA256(encodedString, 'secret');

项目搭建

pom.xml

<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>0.9.1</version>
</dependency>
<!-- jdk1.8 以上要加-->
<!-- <dependency>-->
<!-- <groupId>javax.xml.bind</groupId>-->
<!-- <artifactId>jaxb-api</artifactId>-->
<!-- <version>2.3.1</version>-->
<!-- </dependency>-->
<!-- <dependency>-->
<!-- <groupId>com.sun.xml.bind</groupId>-->
<!-- <artifactId>jaxb-impl</artifactId>-->
<!-- <version>2.3.0</version>-->
<!-- </dependency>-->
<!-- <dependency>-->
<!-- <groupId>com.sun.xml.bind</groupId>-->
<!-- <artifactId>jaxb-core</artifactId>-->
<!-- <version>4.0.1</version>-->
<!-- </dependency>-->
<!-- <dependency>-->
<!-- <groupId>javax.activation</groupId>-->
<!-- <artifactId>activation</artifactId>-->
<!-- <version>1.1</version>-->
<!-- </dependency>-->

测试加密/解密

如何使用 jwt

加密

在这里我们测试一下 jwt 的加密和解密过程来了解 jwt

首先使用 JwtBuilder 来创建 jwt 对象，根据三部分先加入 jwt 的 header，使用.setHeaderParam() 这里使用链式编程增加参数，再加入载荷 payload 使用 .claim() 方法还可以加入主题和有效时间（一天的有效时间 System.currentTimeMillis() + time），id 用了 UUID

定义全局签名信息用于解密，使用 .sigWith(算法,签名key) 加密，调用 .compact() 进行拼接

输出 JWT 数据

import io.jsonwebtoken.*;
import javafx.scene.chart.PieChart;
import sun.awt.SunHints;
import java.security.Key;
import java.security.KeyException;
import java.util.Date;
import java.util.UUID;
public class Test {
private long time = 1000*60*60*24;
private String signature = "amdin";//签名信息（解密）
@org.junit.Test
public void jwt(){
JwtBuilder jwtBuilder = Jwts.builder();//用来构建jwt对象
String jwtToken = jwtBuilder
//Header
.setHeaderParam("typ","jwt")
.setHeaderParam("alg","HS256")
//Payload
.claim("username","tom")
.claim("role","admin")
.setSubject("admin-test")//主题
.setExpiration(new Date(System.currentTimeMillis() + time))//有效
时间 当前时间+一天 24h
.setId(UUID.randomUUID().toString())
//Signature
.signWith(SignatureAlgorithm.HS256,signature)
.compact();//拼接三部分
System.out.println(jwtToken);
}
@org.junit.Test
public void parse(){
String token =
"eyJ0eXAiOiJqd3QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6InRvbSIsInJvbGUiOiJhZG1pbi
IsInN1YiI6ImFkbWluLXRlc3QiLCJleHAiOjE2NjU1NTAzNDIsImp0aSI6IjBiOWU3MmRmLTQ0NjQtND
VkYy04ODMwLWU3NTJkMjg1OGQ0MCJ9.00-RQiPM_a9_0q03CrmcrOBMaLbcfWw85Mbc7xc4AtU";
JwtParser jwtParser = Jwts.parser();
//解密 通过签名进行解析
Jws<Claims> claimsJws =
jwtParser.setSigningKey(signature).parseClaimsJws(token);
//把解析的数据存入对象中
Claims claims = claimsJws.getBody();
//从对象中取出数据
System.out.println(claims.get("username"));
System.out.println(claims.get("role"));
System.out.println(claims.getId()); //ID
System.out.println(claims.getSubject()); //签名
System.out.println(claims.getExpiration()); //有效期截至时间
}
}

对 token 进行解密

首先使用 Jwts.parser() 对象的 .setSigningkey(签名key)解密 .parseClaimsJws(token)会把所有信息解析成 Claims，Claims 相当于我们的各种数据，通过签名对 token 进行解析拿到 Claims ，调用 .getBody 方法把封装的数据放到 claims 对象当中，之后就可以使用对象 .get 方法取出数据，从而将 jwttoken 中解析出我们的数据。

Spring boot + vue + Jwt

简单的小项目来了解 jwt 具体用法

作为java web中的一个令牌，就像之前测试加密时，用户在登录后，访问咱们的登录接口，登录接口判断登录成功后把用户信息转为 jwtoken（jwt工具类，跟上面加密过程一样）存入用户信息中，把整个用户对象给到前端。

controller

@GetMapping("/login")
public User login(User user){
if (USERNAME.equals(user.getUsername()) &&
PASSWORD.equals(user.getPassword())){
//添加token
user.setToken(JwtUtil.createToken());
return user;
}
return null;
}

JwtUtil

private static long time = 1000*60*60*24;
private static String signature = "amdin";
public static String createToken(){
JwtBuilder jwtBuilder = Jwts.builder();//用来构建jwt对象
String jwtToken = jwtBuilder
//Header
.setHeaderParam("typ","jwt")
.setHeaderParam("alg","HS256")
//Payload
.claim("username","admin")
.claim("role","admin")
.setSubject("admin-test")//签名
.setExpiration(new Date(System.currentTimeMillis() + time))//有效
时间 当前时间+一天 24h
.setId(UUID.randomUUID().toString())
//Signature
.signWith(SignatureAlgorithm.HS256,signature)
.compact();//拼接三部分
return jwtToken;
}

前端拿到数据，从请求中拿到 JSON 进入 home 页面

this.$refs.loginForm.validate((valid) => {
if (valid) {
//点击登录后的一个入口
// alert('submit!');
//把全局this记录下来
let _this = this
//axios的get请求需要套{params:_this}，需要把loginForm对象给到
后台
this.$axios.get('http://localhost:8080/login',
{params:_this.loginForm}).then(function (response) {
console.log(response.data)
//使用 localStorage 进行存储 access-admin(localStorage
只能存储字符串)
localStorage.setItem('accessadmin',JSON.stringify(response.data))//JSON.stringify JSON转字符串的方法
//去到登录成功的页面
_this.$router.replace({path:'/home'})
})
} else {
this.$message.error('请输入所有字段！');
return false;
}
});

登录后在请求中拿到用户数据（保证安全性不显示）

home页面，将 JSON 取出并还原存入全局变量 admin 中，就可以从 admin 中取出数据显示到页面上

created() {
this.admin = JSON.parse(window.localStorage.getItem('access-admin'))
}

登录成功后切换页面进行验证（因为每次跳转都需要向后台发请求，重复代码太多，把验证抽象出来，实现代码复用，所以写到路由当中，每个页面的跳转都需要经过路由）俗称路由守卫，首先验证用户是否登录，（取出 JSON 还原判断）如果没有登录直接跳转到登录页面，接着检验token合法性，访问后台/checkToken，把保存的 token 传到后台进行认证，后台返回布尔值，如果是 flase 提示校验失败跳转到错误页面，正确直接往后运行

router.beforeEach((to,from,next)=>{
if (to.path.startsWith('/login')) {
window.localStorage.removeItem('access-admin')
next()
} else {
//验证是否登录
let admin = JSON.parse(window.localStorage.getItem('access-admin'))
if (!admin){
next({path:'/login'})
} else {
//校验token合法性
axios({
url:'http://localhost:8081/checkToken',
method:'get',
headers:{
token:admin.token//类似？传参
}
}).then((response)=>{
console.log(response.data)
//给一个布尔值，如果是flase，提示校验失败，给到错误页面
if (!response.data){
console.log('校验失败')
next({path:'/error'})
}
})
next()
}
}
})

后台验证

从 headers 中获取前端给的 token，进入工具类中进行验证

controller

@GetMapping("/checkToken")
public Boolean checkToken(HttpServletRequest request){
//因为前端是存入 headers 中
String token = request.getHeader("token");
return JwtUtil.checkToken(token);
}

判断 token 是否为空，使用 Jwts.parser()方法，类似之前的解密 token ，解析签名 signature ，解析后拿到集合获取 JwtToken ，不需要拿出数据，只需要判断解析是否异常，如果解析异常说明 token 失效，如果有异常返回 false，反之则返回 true，给到前端

JwtUtil

public static boolean checkToken(String token){
if (token == null){
return false;
}
try {
//判断token是否有效，如果解析异常说明token无效
Jws<Claims> claimsJws =
Jwts.parser().setSigningKey(signature).parseClaimsJws(token);
} catch (Exception e) {
return false;
}
return true;
}

在前端 console.log(response.data) 中可以看出是否有效