Jwt的使用

---

---

一、jwt是什么？

1.简介
1.JWT是什么
JSON Web Token (Jwt), 他是流行的跨域身份验证解决方案
2.为什么使用JWT
JWT的精髓在于: “去中心化”, 数据是保存在客户端的

3、为什么会出现jwt？
在我们之前使用session版本的时候，我们往往打开一个新的网页时，都会直接进入到界面中，这种形式往往是安全的，理所应当是我们打开一个新的网页时，会跳转到登录界面，这时候剖jwt就诞生了，jwt就相当于是一个令牌，它是进入安全通道的凭证。

4.JWT的工作原理
是在服务器身份验证之后，将生成一个JSON对象并将其发送回用户，示例如下：

{“UserName”: “Chongchong”,“Role”: “Admin”,“Expire”: “2018-08-08 20:15:56”}

之后，当用户与服务器通信时，客户在请求中发回JSON对象

为了防止用户篡改数据，服务器将在生成对象时添加签名，并对发回的数据进行验证
5.JWT组成
一个JWT实际上就是一个字符串，它由三部分组成：头部(Header)、载荷(Payload)与签名(signature)

JWT结构原理图：

JWT实际结构：
eyJhbGciOiJIUzI1NiJ9. eyJzdWIiOiJ7fSIsImlzcyI6InpraW5nIiwiZXhwIjoxNTYyODUwMjM3LCJpYXQiOjE1NjI4NDg0MzcsImp0aSI6ImM5OWEyMzRmMDc4NzQyZWE4YjlmYThlYmYzY2VhNjBlIiwidXNlcm5hbWUiOiJ6c3MifQ. WUfqhFTeGzUZCpCfz5eeEpBXBZ8-lYg1htp-t7wD3I4

它是一个很长的字符串，中间用点（.）分隔成三个部分。注意，JWT 内部是没有换行的，这里只是为了便于展示，将它写成了几行。
写成一行，就是下面的样子：Header.Payload.Signature

Payload(负荷)

{“sub”:“123”,“name”:“Tom”,“admin”:true}

payload用来承载要传递的数据，它的json结构实际上是对JWT要传递的数据的一组声明，这些声明被JWT标准称为claims，

它的一个“属性值对”其实就是一个claim(要求)，

每一个claim的都代表特定的含义和作用。

注1：英文“claim”就是要求的意思

注2：如上面结构中的sub代表这个token的所有人，存储的是所有人的ID；name表示这个所有人的名字；admin表示所有人是否管理员的角色。

​ 当后面对JWT进行验证的时候，这些claim都能发挥特定的作用

注3：根据JWT的标准，这些claims可以分为以下三种类型：

​ A. Reserved claims(保留)

​ 它的含义就像是编程语言的保留字一样，属于JWT标准里面规定的一些claim。JWT标准里面定义好的claim有：

​ iss(Issuser)：代表这个JWT的签发主体；

​ sub(Subject)：代表这个JWT的主体，即它的所有人；

​ aud(Audience)：代表这个JWT的接收对象；

​ exp(Expiration time)：是一个时间戳，代表这个JWT的过期时间；

​ nbf(Not Before)：是一个时间戳，代表这个JWT生效的开始时间，意味着在这个时间之前验证JWT是会失败的；

​ iat(Issued at)：是一个时间戳，代表这个JWT的签发时间；

​ jti(JWT ID)：是JWT的唯一标识。

​ B. Public claims，略（不重要）

​ C. Private claims(私有)

​ 这个指的就是自定义的claim，比如前面那个示例中的admin和name都属于自定的claim。这些claim跟JWT标准规定的claim区别在于：JWT规定的claim，

​ JWT的接收方在拿到JWT之后，都知道怎么对这些标准的claim进行验证；而private claims不会验证，除非明确告诉接收方要对这些claim进行验证以及规则才行

​ 按照JWT标准的说明：保留的claims都是可选的，在生成payload不强制用上面的那些claim，你可以完全按照自己的想法来定义payload的结构，不过这样搞根本没必要：

​ 第一是，如果把JWT用于认证， 那么JWT标准内规定的几个claim就足够用了，甚至只需要其中一两个就可以了，假如想往JWT里多存一些用户业务信息，

​ 比如角色和用户名等，这倒是用自定义的claim来添加；第二是，JWT标准里面针对它自己规定的claim都提供了有详细的验证规则描述， 每个实现库都会参照这个描述来提供JWT的验证实现，所以如果是自定义的claim名称，那么你用到的实现库就不会主动去验证这些claim

6.JWT令牌刷新思路
6.1 登陆成功后，将生成的JWT令牌通过响应头返回给客户端

6.2 WEB APP项目每次请求后台数据时(将JWT令牌从请求头中带过来)，

验证通过，刷新JWT，并保存在响应头返回给客户端，有效时间30分钟

JwtFilter

注1：修改CorsFilter添加允许的新的请求头“jwt”

注2：原来在默认的请求上,浏览器只能访问以下默认的响应头

​ Cache-Control

​ Content-Language

​ Content-Type

​ Expires

​ Last-Modified

​ Pragma

​ 如果想让浏览器能访问到其他的 响应头的话 需要在服务器上设置 Access-Control-Expose-Headers

​ Access-Control-Expose-Headers : ‘jwt’

// CorsFilter 允许客户端，发一个新的请求头jwt

1​ resp.setHeader(“Access-Control-Allow-Headers”, “Origin,X-Requested-With, Content-Type, Accept, jwt”);

二、jwt工具类的介绍

一、JWT工具类：
JwtUtils：

package com.zking.ssm.jwt;

import java.util.Date;
import java.util.Map;
import java.util.UUID;

import javax.crypto.SecretKey;
import javax.crypto.spec.SecretKeySpec;

import org.apache.commons.codec.binary.Base64;

import io.jsonwebtoken.Claims;
import io.jsonwebtoken.JwtBuilder;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;

/**
 * JWT验证过滤器：配置顺序 CorsFilte->JwtUtilsr-->StrutsPrepareAndExecuteFilter
 *
 */
public class JwtUtils {
	/**
	 * JWT_WEB_TTL：WEBAPP应用中token的有效时间,默认30分钟
	 */
	public static final long JWT_WEB_TTL = 30 * 60 * 1000;

	/**
	 * 将jwt令牌保存到header中的key
	 */
	public static final String JWT_HEADER_KEY = "jwt";

	// 指定签名的时候使用的签名算法，也就是header那部分，jwt已经将这部分内容封装好了。
	private static final SignatureAlgorithm SIGNATURE_ALGORITHM = SignatureAlgorithm.HS256;
	private static final String JWT_SECRET = "f356cdce935c42328ad2001d7e9552a3";// JWT密匙
	private static final SecretKey JWT_KEY;// 使用JWT密匙生成的加密key

	static {
		byte[] encodedKey = Base64.decodeBase64(JWT_SECRET);
		JWT_KEY = new SecretKeySpec(encodedKey, 0, encodedKey.length, "AES");
	}

	private JwtUtils() {
	}

	/**
	 * 解密jwt，获得所有声明(包括标准和私有声明)
	 * 
	 * @param jwt
	 * @return
	 * @throws Exception
	 */
	public static Claims parseJwt(String jwt) {
		Claims claims = Jwts.parser()
				.setSigningKey(JWT_KEY)
				.parseClaimsJws(jwt)
				.getBody();
		return claims;
	}

	/**
	 * 创建JWT令牌，签发时间为当前时间
	 * 
	 * @param claims
	 *            创建payload的私有声明（根据特定的业务需要添加，如果要拿这个做验证，一般是需要和jwt的接收方提前沟通好验证方式的）
	 * @param ttlMillis
	 *            JWT的有效时间(单位毫秒)，当前时间+有效时间=过期时间
	 * @return jwt令牌
	 */
	public static String createJwt(Map<String, Object> claims, 
			long ttlMillis) {
		// 生成JWT的时间，即签发时间 2021-10-30 10:02:00 -> 30 10:32:00
	
		long nowMillis = System.currentTimeMillis();

		
		//链式语法：
		// 下面就是在为payload添加各种标准声明和私有声明了
		// 这里其实就是new一个JwtBuilder，设置jwt的body
		JwtBuilder builder = Jwts.builder()
				// 如果有私有声明，一定要先设置这个自己创建的私有的声明，这个是给builder的claim赋值，一旦写在标准的声明赋值之后，就是覆盖了那些标准的声明的
				.setClaims(claims)
				// 设置jti(JWT ID)：是JWT的唯一标识，根据业务需要，这个可以设置为一个不重复的值，主要用来作为一次性token,从而回避重放攻击。
				// 可以在未登陆前作为身份标识使用
				.setId(UUID.randomUUID().toString().replace("-", ""))
				// iss(Issuser)签发者，写死
				.setIssuer("zking")
				// iat: jwt的签发时间
				.setIssuedAt(new Date(nowMillis))
				// 代表这个JWT的主体，即它的所有人，这个是一个json格式的字符串，可放数据{"uid":"zs"}。此处没放
				// .setSubject("{}")
				// 设置签名使用的签名算法和签名使用的秘钥
				.signWith(SIGNATURE_ALGORITHM, JWT_KEY)
				// 设置JWT的过期时间
				.setExpiration(new Date(nowMillis + ttlMillis));

		return builder.compact();
	}

	/**
	 * 复制jwt，并重新设置签发时间(为当前时间)和失效时间
	 * 
	 * @param jwt
	 *            被复制的jwt令牌
	 * @param ttlMillis
	 *            jwt的有效时间(单位毫秒)，当前时间+有效时间=过期时间
	 * @return
	 */
	public static String copyJwt(String jwt, Long ttlMillis) {
		//解密JWT，获取所有的声明（私有和标准）
		//old
		Claims claims = parseJwt(jwt);

		// 生成JWT的时间，即签发时间
		long nowMillis = System.currentTimeMillis();

		// 下面就是在为payload添加各种标准声明和私有声明了
		// 这里其实就是new一个JwtBuilder，设置jwt的body
		JwtBuilder builder = Jwts.builder()
				// 如果有私有声明，一定要先设置这个自己创建的私有的声明，这个是给builder的claim赋值，一旦写在标准的声明赋值之后，就是覆盖了那些标准的声明的
				.setClaims(claims)
				// 设置jti(JWT ID)：是JWT的唯一标识，根据业务需要，这个可以设置为一个不重复的值，主要用来作为一次性token,从而回避重放攻击。
				// 可以在未登陆前作为身份标识使用
				//.setId(UUID.randomUUID().toString().replace("-", ""))
				// iss(Issuser)签发者，写死
				// .setIssuer("zking")
				// iat: jwt的签发时间
				.setIssuedAt(new Date(nowMillis))
				// 代表这个JWT的主体，即它的所有人，这个是一个json格式的字符串，可放数据{"uid":"zs"}。此处没放
				// .setSubject("{}")
				// 设置签名使用的签名算法和签名使用的秘钥
				.signWith(SIGNATURE_ALGORITHM, JWT_KEY)
				// 设置JWT的过期时间
				.setExpiration(new Date(nowMillis + ttlMillis));
		return builder.compact();
	}
}

在JwtUtils中要注意的两个方法：

parseJwt：（解密jwt，将看不懂的字符串转换成看的懂的字符串

/**
 * 解密jwt，获得所有声明(包括标准和私有声明)
 * 
 * @param jwt
 * @return
 * @throws Exception
 */
public static Claims parseJwt(String jwt) {
	Claims claims = Jwts.parser().setSigningKey(JWT_KEY).parseClaimsJws(jwt).getBody();
	return claims;
}

**createJwt： 创建JWT令牌，签发时间为当前时间

public static String createJwt(Map<String, Object> claims, long ttlMillis) {
		// 生成JWT的时间，即签发时间
		long nowMillis = System.currentTimeMillis();
 
		// 下面就是在为payload添加各种标准声明和私有声明了
		// 这里其实就是new一个JwtBuilder，设置jwt的body
		JwtBuilder builder = Jwts.builder()
				// 如果有私有声明，一定要先设置这个自己创建的私有的声明，这个是给builder的claim赋值，一旦写在标准的声明赋值之后，就是覆盖了那些标准的声明的
				.setClaims(claims)
				// 设置jti(JWT ID)：是JWT的唯一标识，根据业务需要，这个可以设置为一个不重复的值，主要用来作为一次性token,从而回避重放攻击。
				// 可以在未登陆前作为身份标识使用
				.setId(UUID.randomUUID().toString().replace("-", ""))
				// iss(Issuser)签发者，写死
				// .setIssuer("zking")
				// iat: jwt的签发时间
				.setIssuedAt(new Date(nowMillis))
				// 代表这个JWT的主体，即它的所有人，这个是一个json格式的字符串，可放数据{"uid":"zs"}。此处没放
				// .setSubject("{}")
				// 设置签名使用的签名算法和签名使用的秘钥
				.signWith(SIGNATURE_ALGORITHM, JWT_KEY)
				// 设置JWT的过期时间
				.setExpiration(new Date(nowMillis + ttlMillis));
 
		return builder.compact();
	}

---

三、jwt集成到SPA的项目中

---

1.修改webapp/WEB-INF/web.xml

 <!--CrosFilter跨域过滤器-->
  <filter>
    <filter-name>corsFilter</filter-name>
    <filter-class>com.zking.ssm.util.CorsFilter</filter-class>
  </filter>

2.修改com.zking.ssm.jwt.JwtFilter中的OFF为false开启

private boolean OFF = false;// true关闭jwt令牌验证功能

3.将controller/UserController中的注释解开

 //私有要求claim
            Map<String,Object> json=new HashMap<String,Object>();
            json.put("username", userVo.getUsername());
            //生成JWT，并设置到response响应头中
            String jwt=JwtUtils.createJwt(json, JwtUtils.JWT_WEB_TTL);
            response.setHeader(JwtUtils.JWT_HEADER_KEY, jwt);

运行结果:

4.在spa中的src/store/state.js中添加

export default{
  name:'今天吃饱了嘛',
  jwt:''
}

5.在src/store/mutations.js中添加

setJwt:function (state,payload){
	state.jwt = payload.jwt
}

6.在src/store/getter.js中添加

export default{
  getJwt:function(state){
    return state.jwt;
  }
}

7.修改src/api/http.js

// 请求拦截器
axios.interceptors.request.use(function(config) {
  var jwt=window.zr.$store.getters.getJwt;
  if(jwt){
      config.headers['jwt']=jwt;
  }
	return config;
}, function(error) {
	return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(function(response) {
  var jwt=response.headers['jwt'];
  if(jwt){
     window.zr.$store.commit('setJwt',{jwt:jwt});
  }

	return response;
}, function(error) {
	return Promise.reject(error);
});

8.修改main.js

window.zr =new Vue({
  el: '#app',
  router,
  store,
  data(){
    return {
      BUS:new Vue({

      })
    }
  },
  components: { App },
  template: '<App/>'
})

运行结果:

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了jwt的使用，希望对你有所帮助