• 关于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工具类介绍，三种场景

    1. package com.zking.vue.test;
    2.  
    3. import java.text.SimpleDateFormat;
    4. import java.util.Date;
    5. import java.util.HashMap;
    6. import java.util.Map;
    7.  
    8. import org.junit.Test;
    9.  
    10. import com.zking.vue.util.JwtUtils;
    11.  
    12. import io.jsonwebtoken.Claims;
    13.  
    14. public class JwtDemo {
    15.  
    16. 	private SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss.SSS");
    17.  
    18. 	@Test
    19. 	public void test1() {// 生成JWT
    20. 		Map<String, Object> claims = new HashMap<String, Object>();
    21. 		claims.put("username", "zss");
    22. 		claims.put("age", 18);
    23.  
    24. 		String jwt = JwtUtils.createJwt(claims, JwtUtils.JWT_WEB_TTL);
    25. 		System.out.println(jwt);
    26.  
    27. 		Claims parseJwt = JwtUtils.parseJwt(jwt);
    28. 		for (Map.Entry<String, Object> entry : parseJwt.entrySet()) {
    29. 			System.out.println(entry.getKey() + "=" + entry.getValue());
    30. 		}
    31. 		Date d1 = parseJwt.getIssuedAt();
    32. 		Date d2 = parseJwt.getExpiration();
    33. 		System.out.println("令牌签发时间：" + sdf.format(d1));
    34. 		System.out.println("令牌过期时间：" + sdf.format(d2));
    35. 	}
    36.  
    37. 	@Test
    38. 	public void test2() {// 解析oldJwt
    39. //		String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NjI5MDMzNjAsImlhdCI6MTU2MjkwMTU2MCwiYWdlIjoxOCwianRpIjoiZDVjMzE4Njg0MDcyNDgyZDg1MDE5ODVmMDY3OGQ4NjkiLCJ1c2VybmFtZSI6InpzcyJ9.XDDDRRq5jYq5EdEBHtPm7GcuBz4S0VhDTS1amRCdf48";
    40. 		String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NjM1MjU5MjMsImlhdCI6MTU2MzUyNDEyMywiYWdlIjoxOCwianRpIjoiOTAzNmMwY2Q3NGIwNDBjMzgzMDAxYzdiNmZkMzYzZmIiLCJ1c2VybmFtZSI6InpzcyJ9.sgV9fr4fgmmahDFRJnsfazA6R3H-gNMVcg2ucA227n4";
    41. 		Claims parseJwt = JwtUtils.parseJwt(oldJwt);
    42. 		for (Map.Entry<String, Object> entry : parseJwt.entrySet()) {
    43. 			System.out.println(entry.getKey() + "=" + entry.getValue());
    44. 		}
    45. 		Date d1 = parseJwt.getIssuedAt();
    46. 		Date d2 = parseJwt.getExpiration();
    47. 		System.out.println("令牌签发时间：" + sdf.format(d1));
    48. 		System.out.println("令牌过期时间：" + sdf.format(d2));
    49. 	}
    50.  
    51. 	@Test
    52. 	public void test3() {// 复制jwt，并延时30秒
    53. 		String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NjI5MDMzNjAsImlhdCI6MTU2MjkwMTU2MCwiYWdlIjoxOCwianRpIjoiZDVjMzE4Njg0MDcyNDgyZDg1MDE5ODVmMDY3OGQ4NjkiLCJ1c2VybmFtZSI6InpzcyJ9.XDDDRRq5jYq5EdEBHtPm7GcuBz4S0VhDTS1amRCdf48";
    54. 		String jwt = JwtUtils.copyJwt(oldJwt, JwtUtils.JWT_WEB_TTL);
    55. 		Claims parseJwt = JwtUtils.parseJwt(jwt);
    56. 		for (Map.Entry<String, Object> entry : parseJwt.entrySet()) {
    57. 			System.out.println(entry.getKey() + "=" + entry.getValue());
    58. 		}
    59. 		Date d1 = parseJwt.getIssuedAt();
    60. 		Date d2 = parseJwt.getExpiration();
    61. 		System.out.println("令牌签发时间：" + sdf.format(d1));
    62. 		System.out.println("令牌过期时间：" + sdf.format(d2));
    63. 	}
    64.  
    65. 	@Test
    66. 	public void test4() {// 测试JWT的有效时间
    67. 		Map<String, Object> claims = new HashMap<String, Object>();
    68. 		claims.put("username", "zss");
    69. 		String jwt = JwtUtils.createJwt(claims, 3 * 1000L);
    70. 		System.out.println(jwt);
    71. 		Claims parseJwt = JwtUtils.parseJwt(jwt);
    72. 		Date d1 = parseJwt.getIssuedAt();
    73. 		Date d2 = parseJwt.getExpiration();
    74. 		System.out.println("令牌签发时间：" + sdf.format(d1));
    75. 		System.out.println("令牌过期时间：" + sdf.format(d2));
    76. 	}
    77.  
    78. 	@Test
    79. 	public void test5() {// 三秒后再解析上面过期时间只有三秒的令牌，因为过期则会报错io.jsonwebtoken.ExpiredJwtException
    80. 		String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NjI4NTMzMzAsImlhdCI6MTU2Mjg1MzMyNywidXNlcm5hbWUiOiJ6c3MifQ.e098Vj9KBlZfC12QSDhI5lUGRLbNwb27lrYYSL6JwrQ";
    81. 		Claims parseJwt = JwtUtils.parseJwt(oldJwt);
    82. 		// 过期后解析就报错了，下面代码根本不会执行
    83. 		Date d1 = parseJwt.getIssuedAt();
    84. 		Date d2 = parseJwt.getExpiration();
    85. 		System.out.println("令牌签发时间：" + sdf.format(d1));
    86. 		System.out.println("令牌过期时间：" + sdf.format(d2));
    87. 	}
    88. }


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

    1. // The Vue build version to load with the `import` command
    2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    3. import Vue from 'vue'
    4. //process.env.MOCK && require('@/mock')
    5. import ElementUI from 'element-ui' // 新添加 1
    6. import 'element-ui/lib/theme-chalk/index.css' // 新添加 2 ，避免后期打包样式不同，要放在import App from './App'; 之前
    7. import App from './App'
    8. import router from './router'
    9. import axios from '@/api/http'  //#vue项目对axios的全局配置   
    10. //import axios from 'axios'   
    11. import VueAxios from 'vue-axios'
    12. import store from './store'
    13.  
    14.  
    15. Vue.use(ElementUI);   // 新添加 3
    16. Vue.use(VueAxios,axios);
    17. Vue.config.productionTip = false
    18.  
    19. /* eslint-disable no-new */
    20. window.vm = new Vue({
    21.   el: '#app',
    22.   router,
    23. 	store,
    24.   data(){
    25. 	  return{
    26. 		  //在vue根实例中定义一个变量，这个变量就是vue实例，它总线
    27. 		  //props this.$emit
    28. 		  Bus:new Vue({
    29. 		  	
    30. 		  })
    31. 	  }
    32.   },
    33.   components: { App },
    34.   template: ''
    35. })
    1. /**
    2.  * vue项目对axios的全局配置
    3.  */
    4. import axios from 'axios'
    5. import qs from 'qs'
    6.  
    7. //引入action模块，并添加至axios的类属性urls上
    8. import action from '@/api/action'
    9. axios.urls = action
    10.  
    11. // axios默认配置
    12. axios.defaults.timeout = 10000; // 超时时间
    13. // axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默认地址
    14. axios.defaults.baseURL = action.SERVER;
    15.  
    16. //整理数据
    17. // 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
    18. axios.defaults.transformRequest = function(data) {
    19. 	data = qs.stringify(data);
    20. 	return data;
    21. };
    22.  
    23.  
    24. // 请求拦截器
    25. axios.interceptors.request.use(function(config) {
    26. 	var jwt = window.vm.$store.getters.getJwt;
    27. 	config.headers['jwt'] = jwt;
    28. 	return config;
    29. }, function(error) {
    30. 	return Promise.reject(error);
    31. });
    32.  
    33. // 响应拦截器
    34. axios.interceptors.response.use(function(response) {
    35. 	// debugger;
    36. 	var jwt = response.headers['jwt'];
    37. 	if(jwt){
    38. 		window.vm.$store.commit('setJwt',{jwt:jwt});
    39. 	}
    40. 	return response;
    41. }, function(error) {
    42. 	return Promise.reject(error);
    43. });
    44.  
    45. // // 路由请求拦截
    46. // // http request 拦截器
    47. // axios.interceptors.request.use(
    48. // 	config => {
    49. // 		//config.data = JSON.stringify(config.data);  
    50. // 		//config.headers['Content-Type'] = 'application/json;charset=UTF-8';
    51. // 		//config.headers['Token'] = 'abcxyz';
    52. // 		//判断是否存在ticket，如果存在的话，则每个http header都加上ticket
    53. // 		// if (cookie.get("token")) {
    54. // 		// 	//用户每次操作，都将cookie设置成2小时
    55. // 		// 	cookie.set("token", cookie.get("token"), 1 / 12)
    56. // 		// 	cookie.set("name", cookie.get("name"), 1 / 12)
    57. // 		// 	config.headers.token = cookie.get("token");
    58. // 		// 	config.headers.name = cookie.get("name");
    59. // 		// }
    60. // 		return config;
    61. // 	},
    62. // 	error => {
    63. // 		return Promise.reject(error.response);
    64. // 	});
    65.  
    66. // // 路由响应拦截
    67. // // http response 拦截器
    68. // axios.interceptors.response.use(
    69. // 	response => {
    70. // 		if (response.data.resultCode == "404") {
    71. // 			console.log("response.data.resultCode是404")
    72. // 			// 返回 错误代码-1 清除ticket信息并跳转到登录页面
    73. // 			//      cookie.del("ticket")
    74. // 			//      window.location.href='http://login.com'
    75. // 			return
    76. // 		} else {
    77. // 			return response;
    78. // 		}
    79. // 	},
    80. // 	error => {
    81. // 		return Promise.reject(error.response) // 返回接口返回的错误信息
    82. // 	});
    83.  
    84.  
    85.  
    86. export default axios;
    1. export default{
    2. 	setResName:(state,payload)=>{
    3. 		state.resName = payload.resName;
    4. 	},
    5. 	setJwt:(state,payload)=>{
    6. 		state.jwt = payload.jwt;
    7. 	}
    8. }
    1. export default{
    2. 	getResName:(state) => {
    3. 		return state.resName;
    4. 	},
    5. 	getJwt:(state) => {
    6. 		return state.jwt;
    7. 	},
    8. 	
    9. }

  • 相关阅读:
    2022-33周(8.08-8.14) 项目问题整理
    冥想第九百七十七天
    嘉泰实业：真实低门槛，安全有保障
    什么是算力托管
    Python 小贴士（3）
    《Java面向对象程序设计》学习笔记——第 15 章 Java 多线程机制
    Debezium系列之：Debezium技术专栏第300篇系列文章之打通Debezium实时采集Oracle数据库数据到Kafka集群的技术
    OLAP引擎也能实现高性能向量检索，据说QPS高于milvus！
    在公共Linux服务器上创建自己的python虚拟环境
    javax.net.ssl.SSLHandshakeException: Chain validation failed
  • 原文地址：https://blog.csdn.net/m0_67864917/article/details/126900734