JWT介绍

目录

一、JWT出现的原因以及工作原理

          1、JWT的定义: 

          2、为什么要使用jwt?

          3、为什么会出现jwt?

          4、jwt的工作原理

          5、jwt演示效果:

          6、抛出问题:

二、JWT工具类的介绍以及三种场景

           一、JWT工具类:

           二、三种场景:

三、JWT与vuex在SPA项目中的应用


一、JWT出现的原因以及工作原理

          1、JWT的定义: 

               JSON Web Token (JWT),是目前最流行的跨域身份验证解决方案

          2、为什么要使用jwt?


               JWT的精髓在于:“去中心化”,数据是保存在客户端的。

          3、为什么会出现jwt?

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

          4、jwt的工作原理

               jwt的工作原理和session的底层原理有大致百分之八十是相似的,先来看看session的底层原理:

1、当用户访问服务端时,服务器生成一个随机字符串

2、当用户登录成功后,把session随机字符串组织成键值对的形式加到cookie里发送给用户

3、服务端已发送给客户端,cookie中的随机字符串做键,用户信息做值,保存用户信息

               jwt工作原理:

1、第一次请求:请求后台服务器,生成一个加密的字符串(jwt头+载荷+签名)jwt串就会放入到response的header中,会返回到前端

2、第二次请求:请求后台服务器,会在request的header中携带jwt串,与后台信息做对比,如果一致,那么验证通过放行,反之过滤。

          5、jwt演示效果:

                1、当没有加jwt时,可以直接访问到主界面:

新建一个标签,将主界面的访问路径copy上去,不用登陆,就可以直接访问到,并且还会出现左侧树形菜单 

                2、当加了jwt时,就访问不到主界面了:

解决jwt过滤器代码:

	<!-- 解决jwt问题的过滤器 -->
	<filter>
		<filter-name>jwtFilter</filter-name>
		<filter-class>com.zking.vue.util.JwtFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>jwtFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

JwtFilter:

package com.zking.vue.util;

import java.io.IOException;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import io.jsonwebtoken.Claims;

/**
 * * JWT验证过滤器,配置顺序 :CorsFilte-->JwtFilter-->struts2中央控制器
 * 
 * @author Administrator
 *
 */
public class JwtFilter implements Filter {

	// 排除的URL,一般为登陆的URL(请改成自己登陆的URL)
	private static String EXCLUDE = "^/vue/userAction_login\\.action?.*$";

	private static Pattern PATTERN = Pattern.compile(EXCLUDE);

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

	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
	}

	@Override
	public void destroy() {
	}

	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
			throws IOException, ServletException {
		HttpServletRequest req = (HttpServletRequest) request;
		HttpServletResponse resp = (HttpServletResponse) response;
		String path = req.getServletPath();
		if (OFF || isExcludeUrl(path)) {// 登陆直接放行
			chain.doFilter(request, response);
			return;
		}

		// 从客户端请求头中获得令牌并验证
		String jwt = req.getHeader(JwtUtils.JWT_HEADER_KEY);
		Claims claims = this.validateJwtToken(jwt);
		if (null == claims) {
			// resp.setCharacterEncoding("UTF-8");
			resp.sendError(403, "JWT令牌已过期或已失效");
			return;
		} else {
			String newJwt = JwtUtils.copyJwt(jwt, JwtUtils.JWT_WEB_TTL);
			resp.setHeader(JwtUtils.JWT_HEADER_KEY, newJwt);
			chain.doFilter(request, response);
		}
	}

	/**
	 * 验证jwt令牌,验证通过返回声明(包括公有和私有),返回null则表示验证失败
	 */
	private Claims validateJwtToken(String jwt) {
		Claims claims = null;
		try {
			if (null != jwt) {
				claims = JwtUtils.parseJwt(jwt);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return claims;
	}

	/**
	 * 是否为排除的URL
	 * 
	 * @param path
	 * @return
	 */
	private boolean isExcludeUrl(String path) {
		Matcher matcher = PATTERN.matcher(path);
		return matcher.matches();
	}

	// public static void main(String[] args) {
	// String path = "/sys/userAction_doLogin.action?username=zs&password=123";
	// Matcher matcher = PATTERN.matcher(path);
	// boolean b = matcher.matches();
	// System.out.println(b);
	// }

}

 

UserAction: 

package com.zking.vue.web;

import java.util.HashMap;
import java.util.Map;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.opensymphony.xwork2.ModelDriven;
import com.zking.base.web.BaseAction;
import com.zking.vue.biz.UserBiz;
import com.zking.vue.entity.User;
import com.zking.vue.util.JsonData;
import com.zking.vue.util.JwtUtils;
import com.zking.vue.util.PageBean;
import com.zking.vue.util.ResponseUtil;
import com.zking.vue.util.StringUtils;

public class UserAction extends BaseAction implements ModelDriven<User>{

	private UserBiz userBiz;
	private User user = new User();

	public UserBiz getUserBiz() {
		return userBiz;
	}

	public void setUserBiz(UserBiz userBiz) {
		this.userBiz = userBiz;
	}
	 
	public String login() {
		ObjectMapper om = new ObjectMapper();
		JsonData jsonData = null;
		try {
			if(StringUtils.isBlank(user.getUname()) || StringUtils.isBlank(user.getPwd())) {
				jsonData = new JsonData(0, "用户或者密码为空", user);
			}else {
				User u = this.userBiz.login(user);
				Map<String, Object> claims = new HashMap<String, Object>();
				claims.put("uname",user.getUname());
				claims.put("pwd", user.getPwd());
				String jwt = JwtUtils.createJwt(claims, JwtUtils.JWT_WEB_TTL);
				response.setHeader(JwtUtils.JWT_HEADER_KEY, jwt);
				jsonData = new JsonData(1, "登录成功", u);
			}
		} catch (Exception e) {
			e.printStackTrace();
			jsonData = new JsonData(0, "用户或者密码错误", user);
		}finally {
			try {
				ResponseUtil.write(response, om.writeValueAsString(jsonData));
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		
		return null;
	}
	
	public String getAsyncData() {
		ObjectMapper om = new ObjectMapper();
		try {
			Thread.sleep(6000);
			ResponseUtil.write(response, om.writeValueAsString("http://www.javaxl.com"));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

	@Override
	public User getModel() {
		return user;
	}
}

将项目重新运行一遍:

现在重新登陆Appmain.vue,已经不会显示出左侧树形菜单了,说明jwt令牌生效:

 

          6、抛出问题:

6.1问题一:但是当我重新从登陆界面登陆进去时,左侧树形菜单还是不能显示出来:

问题根源:第一次请求时,在登陆响应头里有jwt值,但是在请求头里没有jwt值 

 解决问题:在http.js中有一个响应和请求拦截器,首先要把两个拦截器的代码取消注释,在之后到Mutations.js文件中写好setJwt方法,之后到state.js文件中定义Jwt变量,再到getters.js文件中写好getJwt方法,为了避免指针污染问题,在main.js要将window.vm定义为一个组件(相当于this)。

http.js:

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

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

Mutations.js:

export default {
  setResturantName: (state, payload) => {
    //payload为载荷保存且传递的参数
    state.resturantName = payload.resturantName;
  },
  setJwt: (state, payload) => {
    //payload为载荷保存且传递的参数
    state.jwt= payload.jwt;
  }
}

state.js:

export default {
  resturantName: '飞歌餐馆',
  jwt: ''
}

 getters.js:

export default {
  getResturantName: (state) => {
    return state.resturantName;
  },
  getJwt: (state) => {
    return state.jwt;
  }
}

main.js: 

 将以上操作完成之后,请求头中jwt中也有值了,看运行效果:

6.2问题二:为什么说jwt的安全性比session的安全性高?

首先再次用直接访问Appmian.vue来做实例:请文这次还可以访问到主界面的左侧树形菜单吗?

不能!!! 

为什么呢? 

大家可以从调试台中可以看出,当我第一次从登陆界面中登陆进来时,只有我的响应头中有jwt值,而我的请求头中没有jwt值,当我进入到树形菜单时,我的请求头中有jwt值是将登陆时的响应头中的jwt值放入到左侧树形菜单中请求头中的jwt。总的来说,jwt就是拿了又放,放了又拿的一个过程。当我再次想访问时,我必须先登陆,拿到第二次左侧树形菜单中响应头中的jwt值,用来作为第三次登陆时访问树形菜单请求头的jwt值。这就是为什么登陆之后左侧树形菜单中的响应头中jwt有值!

 

 

二、JWT工具类的介绍以及三种场景

           一、JWT工具类:

JwtUtils:

package com.zking.vue.util;

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那部分,jjwt已经将这部分内容封装好了。
	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的时间,即签发时间
		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) {
		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的构成:jwt由头+载荷+签名组成,这就好比抗日战争时发电报,载荷是机密,而签名是密码本(破译的密码)。

 1、场景一:jwt令牌生成->解析->校验

将zs的信息打印出来:

public void test1() {// 生成JWT
		Map<String, Object> claims = new HashMap<String, Object>();
		claims.put("username", "zss");
		claims.put("age", 18);

		String jwt = JwtUtils.createJwt(claims, JwtUtils.JWT_WEB_TTL);
		System.out.println(jwt);

		Claims parseJwt = JwtUtils.parseJwt(jwt);
		for (Map.Entry<String, Object> entry : parseJwt.entrySet()) {
			System.out.println(entry.getKey() + "=" + entry.getValue());
		}
		Date d1 = parseJwt.getIssuedAt();
		Date d2 = parseJwt.getExpiration();
		System.out.println("令牌签发时间:" + sdf.format(d1));
		System.out.println("令牌过期时间:" + sdf.format(d2));
	}

 张三的信息全部打印出:

2、场景二:令牌过期时间

大家试想一下,如果令牌过期时间只有三十分钟,但是我在使用令牌的过程中,令牌突然关闭,我还在工作,给我关闭了,这肯定不合理,所以就有了复制令牌的场景!

当我解析旧令牌时,因为时间早就过了,所以就会报错!

io.jsonwebtoken.ExpiredJwtException: JWT expired at 2019-07-19T16:45:23Z. Current time: 2021-11-21T17:28:39Z, a difference of 73960996388 milliseconds.  Allowed clock skew: 0 milliseconds.

3、场景三:令牌延续时间

@Test
	public void test3() {// 复制jwt,并延时30秒
		String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2Mzc0ODgxNjEsImlhdCI6MTYzNzQ4NjM2MSwiYWdlIjoxOCwianRpIjoiNDYxZWJlMDRiYjlkNDRkNGI3YzFkYjJjZjY4MGY1MWIiLCJ1c2VybmFtZSI6InpzcyJ9.CJygcWSmlSf3Pv2hGByg17m6MAfbedy0a_ghvbuh9es";
		String jwt = JwtUtils.copyJwt(oldJwt, JwtUtils.JWT_WEB_TTL);
		Claims parseJwt = JwtUtils.parseJwt(jwt);
		for (Map.Entry<String, Object> entry : parseJwt.entrySet()) {
			System.out.println(entry.getKey() + "=" + entry.getValue());
		}
		Date d1 = parseJwt.getIssuedAt();
		Date d2 = parseJwt.getExpiration();
		System.out.println("令牌签发时间:" + sdf.format(d1));
		System.out.println("令牌过期时间:" + sdf.format(d2));
	}

令牌时间延长: 

 

三、JWT与vuex在SPA项目中的应用

         JWT与vuex在SPA项目中的应用在第一大点已经介绍过了,主要是涉及vuex的几大js文件

1、在http.js中要将请求和响应的拦截器取消注释

2、在Mutations.js中要写好设置jwt令牌的方法

3、在state.js中要定义jwt变量

4、在getters.js中要写好得到jwt令牌的方法

5、在src下的main.js中定义window.vm

今天的知识就分享到这里了,希望能够帮助到你们!

JWT(JSON Web Token)是一种用于在网络应用程序之间安全传输信息的开放标准。它以 JSON 为基础并使用数字签名或消息认证码(MAC)来验证信息的完整性和真实性。 JWT 由三个部分组成:头部、载荷和签名。 头部包含 JWT 使用的签名算法信息,例如 HMAC SHA256 或 RSA。载荷包含需要传输的信息,例如用户 ID 或权限信息。签名是将头部、载荷和秘钥组合后生成的哈希值,用于验证信息的真实性。 JWT 的工作原理如下: 1. 用户使用用户名和密码进行身份验证。 2. 服务器验证用户名和密码的正确性。 3. 如果验证成功,服务器生成 JWT 并将其发送回客户端。 4. 客户端将 JWT 存储在本地并在每个后续请求中将其包含在请求头部中。 5. 服务器在接收到请求时,验证 JWT 的签名并检查载荷中的信息是否与所需的一致。如果验证成功,服务器会处理请求。 JWT 的优点是: 1. 轻量级和简单:JWT 以 JSON 格式编码,易于理解和实现。 2. 安全性:使用数字签名或消息认证码(MAC)验证信息的完整性和真实性,确保信息不被篡改或伪造。 3. 可扩展性:JWT 载荷可以包含任意数量的属性和元数据,使其非常适合用于身份验证和授权。 4. 无状态:JWT 包含所有必要的信息,因此服务器不需要存储任何会话信息,使其易于扩展和实现负载均衡。 然而,JWT 也存在一些缺点,例如: 1. JWT 一旦生成就无法撤销,因此必须确保密钥的安全性。 2. JWT 中包含的信息对于攻击者来说是可见的,因此敏感信息不应该存储在 JWT 中。 3. JWT 无法在传输过程中进行更新,因此在过期之前必须生成新的 JWT。 总体来说,JWT 是一种非常有用的身份验证和授权解决方案,但在使用时需要仔细考虑其安全性和缺点。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值