关于JWT

目录

一，jwt出现的原因及工作原理

1. JWT是什么

2. 为什么使用JWT 

3. JWT的工作原理 

 4. JWT组成

5. JWT的验证过程 

二、jwt工具类介绍，三种场景

​三、jwt与vuex配合在SPA项目中的应用 

---

一，jwt出现的原因及工作原理

1. JWT是什么

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

2. 为什么使用JWT 

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

3. JWT的工作原理 

   1. 是在服务器身份验证之后，将生成一个JSON对象并将其发送回用户，示例如下：
      {"UserName": "Chongchong","Role": "Admin","Expire": "2018-08-08 20:15:56"}

   2. 之后，当用户与服务器通信时，客户在请求中发回JSON对象
   3. 为了防止用户篡改数据，服务器将在生成对象时添加签名，并对发回的数据进行验证

 4. JWT组成

一个JWT实际上就是一个字符串，它由三部分组成：头部(Header)、载荷(Payload)与签名(signature)

5. JWT的验证过程 

它验证的方法其实很简单，只要把header做base64url解码，就能知道JWT用的什么算法做的签名，然后用这个算法，再次用同样的逻辑对header和payload做一次签名，
   并比较这个签名是否与JWT本身包含的第三个部分的串是否完全相同，只要不同，就可以认为这个JWT是一个被篡改过的串，自然就属于验证失败了。
   接收方生成签名的时候必须使用跟JWT发送方相同的密钥

二、jwt工具类介绍，三种场景

package com.zking.vue.test;
 
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
 
import org.junit.Test;
 
import com.zking.vue.util.JwtUtils;
 
import io.jsonwebtoken.Claims;
 
public class JwtDemo {
 
	private SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss.SSS");
 
	@Test
	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));
	}
 
	@Test
	public void test2() {// 解析oldJwt
//		String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NjI5MDMzNjAsImlhdCI6MTU2MjkwMTU2MCwiYWdlIjoxOCwianRpIjoiZDVjMzE4Njg0MDcyNDgyZDg1MDE5ODVmMDY3OGQ4NjkiLCJ1c2VybmFtZSI6InpzcyJ9.XDDDRRq5jYq5EdEBHtPm7GcuBz4S0VhDTS1amRCdf48";
		String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NjM1MjU5MjMsImlhdCI6MTU2MzUyNDEyMywiYWdlIjoxOCwianRpIjoiOTAzNmMwY2Q3NGIwNDBjMzgzMDAxYzdiNmZkMzYzZmIiLCJ1c2VybmFtZSI6InpzcyJ9.sgV9fr4fgmmahDFRJnsfazA6R3H-gNMVcg2ucA227n4";
		Claims parseJwt = JwtUtils.parseJwt(oldJwt);
		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));
	}
 
	@Test
	public void test3() {// 复制jwt，并延时30秒
		String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NjI5MDMzNjAsImlhdCI6MTU2MjkwMTU2MCwiYWdlIjoxOCwianRpIjoiZDVjMzE4Njg0MDcyNDgyZDg1MDE5ODVmMDY3OGQ4NjkiLCJ1c2VybmFtZSI6InpzcyJ9.XDDDRRq5jYq5EdEBHtPm7GcuBz4S0VhDTS1amRCdf48";
		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));
	}
 
	@Test
	public void test4() {// 测试JWT的有效时间
		Map<String, Object> claims = new HashMap<String, Object>();
		claims.put("username", "zss");
		String jwt = JwtUtils.createJwt(claims, 3 * 1000L);
		System.out.println(jwt);
		Claims parseJwt = JwtUtils.parseJwt(jwt);
		Date d1 = parseJwt.getIssuedAt();
		Date d2 = parseJwt.getExpiration();
		System.out.println("令牌签发时间：" + sdf.format(d1));
		System.out.println("令牌过期时间：" + sdf.format(d2));
	}
 
	@Test
	public void test5() {// 三秒后再解析上面过期时间只有三秒的令牌，因为过期则会报错io.jsonwebtoken.ExpiredJwtException
		String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NjI4NTMzMzAsImlhdCI6MTU2Mjg1MzMyNywidXNlcm5hbWUiOiJ6c3MifQ.e098Vj9KBlZfC12QSDhI5lUGRLbNwb27lrYYSL6JwrQ";
		Claims parseJwt = JwtUtils.parseJwt(oldJwt);
		// 过期后解析就报错了，下面代码根本不会执行
		Date d1 = parseJwt.getIssuedAt();
		Date d2 = parseJwt.getExpiration();
		System.out.println("令牌签发时间：" + sdf.format(d1));
		System.out.println("令牌过期时间：" + sdf.format(d2));
	}
}

三、jwt与vuex配合在SPA项目中的应用 

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//process.env.MOCK && require('@/mock')
import ElementUI from 'element-ui' // 新添加 1
import 'element-ui/lib/theme-chalk/index.css' // 新添加 2 ，避免后期打包样式不同，要放在import App from './App'; 之前
import App from './App'
import router from './router'
import axios from '@/api/http'  //#vue项目对axios的全局配置   
//import axios from 'axios'   
import VueAxios from 'vue-axios'
import store from './store'
 
 
Vue.use(ElementUI);   // 新添加 3
Vue.use(VueAxios,axios);
Vue.config.productionTip = false
 
/* eslint-disable no-new */
window.vm = new Vue({
  el: '#app',
  router,
	store,
  data(){
	  return{
		  //在vue根实例中定义一个变量，这个变量就是vue实例，它总线
		  //props this.$emit
		  Bus:new Vue({
		  	
		  })
	  }
  },
  components: { App },
  template: '<App/>'
})

/**
 * vue项目对axios的全局配置
 */
import axios from 'axios'
import qs from 'qs'
 
//引入action模块，并添加至axios的类属性urls上
import action from '@/api/action'
axios.urls = action
 
// axios默认配置
axios.defaults.timeout = 10000; // 超时时间
// axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默认地址
axios.defaults.baseURL = action.SERVER;
 
//整理数据
// 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
axios.defaults.transformRequest = function(data) {
	data = qs.stringify(data);
	return data;
};
 
 
// 请求拦截器
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);
});
 
// // 路由请求拦截
// // http request 拦截器
// axios.interceptors.request.use(
// 	config => {
// 		//config.data = JSON.stringify(config.data);  
// 		//config.headers['Content-Type'] = 'application/json;charset=UTF-8';
// 		//config.headers['Token'] = 'abcxyz';
// 		//判断是否存在ticket，如果存在的话，则每个http header都加上ticket
// 		// if (cookie.get("token")) {
// 		// 	//用户每次操作，都将cookie设置成2小时
// 		// 	cookie.set("token", cookie.get("token"), 1 / 12)
// 		// 	cookie.set("name", cookie.get("name"), 1 / 12)
// 		// 	config.headers.token = cookie.get("token");
// 		// 	config.headers.name = cookie.get("name");
// 		// }
// 		return config;
// 	},
// 	error => {
// 		return Promise.reject(error.response);
// 	});
 
// // 路由响应拦截
// // http response 拦截器
// axios.interceptors.response.use(
// 	response => {
// 		if (response.data.resultCode == "404") {
// 			console.log("response.data.resultCode是404")
// 			// 返回 错误代码-1 清除ticket信息并跳转到登录页面
// 			//      cookie.del("ticket")
// 			//      window.location.href='http://login.com'
// 			return
// 		} else {
// 			return response;
// 		}
// 	},
// 	error => {
// 		return Promise.reject(error.response) // 返回接口返回的错误信息
// 	});
 
 
 
export default axios;

export default{
	setResName:(state,payload)=>{
		state.resName = payload.resName;
	},
	setJwt:(state,payload)=>{
		state.jwt = payload.jwt;
	}
}

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