• Vue开发中Jwt的使用

       🏅我是默，一个在CSDN分享笔记的博主。📚📚

    🌟在这里，我要推荐给大家我的专栏《Vue》。🎯🎯

    🚀无论你是编程小白，还是有一定基础的程序员，这个专栏都能满足你的需求。我会用最简单易懂的语言，带你走进Vue的世界，让你从零开始，一步步成为JAVA大师。🚀🏆

    🌈让我们在Vue的世界里畅游吧！🌈

    🎁如果感觉还不错的话请记得给我点赞哦！🎁🎁

    💖期待你的加入，一起学习，一起进步！💖💖

    一.Jwt的简介 

    JWT（JSON Web Token）是一种用于身份验证和授权的开放标准，它定义了一种紧凑且自包含的方式来在各方之间安全地传输信息。JWT通常由三部分组成：头部、负载和签名。其中，头部描述了JWT的元数据，如加密算法、类型等，负载包含了需要传递的信息，比如用户ID、权限等，签名则用于保证数据的完整性和安全性。

    JWT的工作流程通常如下：

    1. 用户通过用户名和密码进行校验，服务器验证通过后生成JWT；
    2. 浏览器将JWT存储在客户端，可以使用cookie或localStorage等机制；
    3. 客户端每次向服务器发送请求时，都会附加JWT到HTTP请求头中；
    4. 服务器收到请求后，会验证JWT的合法性、解析出负载中的信息，并对请求作出相应的处理。

    使用JWT的优点包括：

    1. 无状态：每个请求都包含了足够的信息，无需在服务端保存任何状态；
    2. 可扩展性：可以添加额外的信息到负载中，如用户角色、过期时间等；
    3. 自包含：负载中包含了信息和签名，可以验证数据的完整性和来源；
    4. 通用性：JWT是一种通用的协议，可以被不同的应用和语言使用。

    需要注意的是，在使用JWT进行身份验证时，为保证数据的安全性，需要遵循一些最佳实践，如使用HTTPS协议传输、设置合适的过期时间等。此外，JWT仅适用于传递数据，而不适用于加密数据，如果需要加密数据，需要添加额外的加密层级。

    总之，JWT是一种轻量级的身份验证和授权协议，具有无状态、可扩展、自包含和通用等优点，被广泛应用于Web和移动应用程序中。

    传统开发的弊端,以及解决方法

    二.Jwt工具类的使用 

    1.定义工具类

    1. package com.zking.ssm.jwt;
    2.  
    3. import java.util.Date;
    4. import java.util.Map;
    5. import java.util.UUID;
    6.  
    7. import javax.crypto.SecretKey;
    8. import javax.crypto.spec.SecretKeySpec;
    9.  
    10. import org.apache.commons.codec.binary.Base64;
    11.  
    12. import io.jsonwebtoken.Claims;
    13. import io.jsonwebtoken.JwtBuilder;
    14. import io.jsonwebtoken.Jwts;
    15. import io.jsonwebtoken.SignatureAlgorithm;
    16.  
    17. /**
    18.  * JWT验证过滤器：配置顺序 CorsFilte->JwtUtilsr-->StrutsPrepareAndExecuteFilter
    19.  *
    20.  */
    21. public class JwtUtils {
    22. 	/**
    23. 	 * JWT_WEB_TTL：WEBAPP应用中token的有效时间,默认30分钟
    24. 	 */
    25. 	public static final long JWT_WEB_TTL = 30 * 60 * 1000;
    26.  
    27. 	/**
    28. 	 * 将jwt令牌保存到header中的key
    29. 	 */
    30. 	public static final String JWT_HEADER_KEY = "jwt";
    31.  
    32. 	// 指定签名的时候使用的签名算法，也就是header那部分，jwt已经将这部分内容封装好了。
    33. 	private static final SignatureAlgorithm SIGNATURE_ALGORITHM = SignatureAlgorithm.HS256;
    34. 	private static final String JWT_SECRET = "f356cdce935c42328ad2001d7e9552a3";// JWT密匙
    35. 	private static final SecretKey JWT_KEY;// 使用JWT密匙生成的加密key
    36.  
    37. 	static {
    38. 		byte[] encodedKey = Base64.decodeBase64(JWT_SECRET);
    39. 		JWT_KEY = new SecretKeySpec(encodedKey, 0, encodedKey.length, "AES");
    40. 	}
    41.  
    42. 	private JwtUtils() {
    43. 	}
    44.  
    45. 	/**
    46. 	 * 解密jwt，获得所有声明(包括标准和私有声明)
    47. 	 * 
    48. 	 * @param jwt
    49. 	 * @return
    50. 	 * @throws Exception
    51. 	 */
    52. 	public static Claims parseJwt(String jwt) {
    53. 		Claims claims = Jwts.parser()
    54. 				.setSigningKey(JWT_KEY)
    55. 				.parseClaimsJws(jwt)
    56. 				.getBody();
    57. 		return claims;
    58. 	}
    59.  
    60. 	/**
    61. 	 * 创建JWT令牌，签发时间为当前时间
    62. 	 * 
    63. 	 * @param claims
    64. 	 *            创建payload的私有声明（根据特定的业务需要添加，如果要拿这个做验证，一般是需要和jwt的接收方提前沟通好验证方式的）
    65. 	 * @param ttlMillis
    66. 	 *            JWT的有效时间(单位毫秒)，当前时间+有效时间=过期时间
    67. 	 * @return jwt令牌
    68. 	 */
    69. 	public static String createJwt(Map claims, 
    70. 			long ttlMillis) {
    71. 		// 生成JWT的时间，即签发时间 2021-10-30 10:02:00 -> 30 10:32:00
    72. 	
    73. 		long nowMillis = System.currentTimeMillis();
    74.  
    75. 		
    76. 		//链式语法：
    77. 		// 下面就是在为payload添加各种标准声明和私有声明了
    78. 		// 这里其实就是new一个JwtBuilder，设置jwt的body
    79. 		JwtBuilder builder = Jwts.builder()
    80. 				// 如果有私有声明，一定要先设置这个自己创建的私有的声明，这个是给builder的claim赋值，一旦写在标准的声明赋值之后，就是覆盖了那些标准的声明的
    81. 				.setClaims(claims)
    82. 				// 设置jti(JWT ID)：是JWT的唯一标识，根据业务需要，这个可以设置为一个不重复的值，主要用来作为一次性token,从而回避重放攻击。
    83. 				// 可以在未登陆前作为身份标识使用
    84. 				.setId(UUID.randomUUID().toString().replace("-", ""))
    85. 				// iss(Issuser)签发者，写死
    86. 				.setIssuer("zking")
    87. 				// iat: jwt的签发时间
    88. 				.setIssuedAt(new Date(nowMillis))
    89. 				// 代表这个JWT的主体，即它的所有人，这个是一个json格式的字符串，可放数据{"uid":"zs"}。此处没放
    90. 				// .setSubject("{}")
    91. 				// 设置签名使用的签名算法和签名使用的秘钥
    92. 				.signWith(SIGNATURE_ALGORITHM, JWT_KEY)
    93. 				// 设置JWT的过期时间
    94. 				.setExpiration(new Date(nowMillis + ttlMillis));
    95.  
    96. 		return builder.compact();
    97. 	}
    98.  
    99. 	/**
    100. 	 * 复制jwt，并重新设置签发时间(为当前时间)和失效时间
    101. 	 * 
    102. 	 * @param jwt
    103. 	 *            被复制的jwt令牌
    104. 	 * @param ttlMillis
    105. 	 *            jwt的有效时间(单位毫秒)，当前时间+有效时间=过期时间
    106. 	 * @return
    107. 	 */
    108. 	public static String copyJwt(String jwt, Long ttlMillis) {
    109. 		//解密JWT，获取所有的声明（私有和标准）
    110. 		//old
    111. 		Claims claims = parseJwt(jwt);
    112.  
    113. 		// 生成JWT的时间，即签发时间
    114. 		long nowMillis = System.currentTimeMillis();
    115.  
    116. 		// 下面就是在为payload添加各种标准声明和私有声明了
    117. 		// 这里其实就是new一个JwtBuilder，设置jwt的body
    118. 		JwtBuilder builder = Jwts.builder()
    119. 				// 如果有私有声明，一定要先设置这个自己创建的私有的声明，这个是给builder的claim赋值，一旦写在标准的声明赋值之后，就是覆盖了那些标准的声明的
    120. 				.setClaims(claims)
    121. 				// 设置jti(JWT ID)：是JWT的唯一标识，根据业务需要，这个可以设置为一个不重复的值，主要用来作为一次性token,从而回避重放攻击。
    122. 				// 可以在未登陆前作为身份标识使用
    123. 				//.setId(UUID.randomUUID().toString().replace("-", ""))
    124. 				// iss(Issuser)签发者，写死
    125. 				// .setIssuer("zking")
    126. 				// iat: jwt的签发时间
    127. 				.setIssuedAt(new Date(nowMillis))
    128. 				// 代表这个JWT的主体，即它的所有人，这个是一个json格式的字符串，可放数据{"uid":"zs"}。此处没放
    129. 				// .setSubject("{}")
    130. 				// 设置签名使用的签名算法和签名使用的秘钥
    131. 				.signWith(SIGNATURE_ALGORITHM, JWT_KEY)
    132. 				// 设置JWT的过期时间
    133. 				.setExpiration(new Date(nowMillis + ttlMillis));
    134. 		return builder.compact();
    135. 	}
    136. }
    137.  
    138.  
    139.  
    140.

    2.通过工具类进行测试

    2.1生成jwt

    1. public void test1() {// 生成JWT
    2. 		
    3. 		//JWT Token=Header.Payload.Signature
    4. 		//头部.载荷.签名
    5. 		//Payload=标准声明+私有声明+公有声明
    6. 		
    7. 		//定义私有声明
    8. 		Map claims = new HashMap();
    9. 		claims.put("username", "lb");
    10. 		claims.put("age", 18);
    11. 		
    12. 	    //TTL:Time To Live
    13. 		String jwt = JwtUtils.createJwt(claims, JwtUtils.JWT_WEB_TTL);
    14. 		System.out.println(jwt);
    15.  
    16. 		//获取Payload（包含标准和私有声明）
    17. 		Claims parseJwt = JwtUtils.parseJwt(jwt);
    18. 		for (Map.Entry entry : parseJwt.entrySet()) {
    19. 			System.out.println(entry.getKey() + "=" + entry.getValue());
    20. 		}
    21. 		Date d1 = parseJwt.getIssuedAt();
    22. 		Date d2 = parseJwt.getExpiration();
    23. 		System.out.println("令牌签发时间：" + sdf.format(d1));
    24. 		System.out.println("令牌过期时间：" + sdf.format(d2));
    25. 	}

    2.2解析旧的Jwt

    1. @Test
    2. 	public void test2() {// 解析oldJwt
    3. 		//io.jsonwebtoken.ExpiredJwtException：JWT过期异常
    4. 		//io.jsonwebtoken.SignatureException：签名异常
    5. 		//String oldJwt="eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1OTA3MTg2NzcsImlhdCI6MTU5MDcxNjg3NywiYWdlIjoxOCwianRpIjoiNDFmZjFiZGFkYzkxNDA3OGE4ZGUyNGRkZDEwYjU4N2IiLCJ1c2VybmFtZSI6InpzcyJ9.DdPvioX6kuhV6lEfD9QAN2eQSk_mO3dYkmDmTQsqa78";
    6. 		//eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzU1NjE3MjcsImlhdCI6MTYzNTU1OTkyNywiYWdlIjoxOCwianRpIjoiN2RlYmIzM2JiZTg3NDBmODgzNDI5Njk0ZWE4NzcyMTgiLCJ1c2VybmFtZSI6InpzcyJ9.dUR-9JUlyRdoYx-506SxXQ3gbHFCv0g5Zm8ZGzK1fzw
    7. 		String newJwt="eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ6a2luZyIsImV4cCI6MTY2MjM0Njg3MSwiaWF0IjoxNjYyMzQ1MDcxLCJhZ2UiOjE4LCJqdGkiOiI4YjllNzc3YzFlMDM0MjViYThmMDVjNTFlMTU3NDQ1MiIsInVzZXJuYW1lIjoienNzIn0.UWpJxPxwJ09PKxE2SY5ME41W1Kv3jP5bZGKK-oNUDuM";
    8. 		String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzU1NjE3MjcsImlhdCI6MTYzNTU1OTkyNywiYWdlIjoxOCwianRpIjoiN2RlYmIzM2JiZTg3NDBmODgzNDI5Njk0ZWE4NzcyMTgiLCJ1c2VybmFtZSI6InpzcyJ9.dUR-9JUlyRdoYx-506SxXQ3gbHFCv0g5Zm8ZGzK1fzw";
    9. 		Claims parseJwt = JwtUtils.parseJwt(newJwt);
    10. 		for (Map.Entry entry : parseJwt.entrySet()) {
    11. 			System.out.println(entry.getKey() + "=" + entry.getValue());
    12. 		}
    13. 		Date d1 = parseJwt.getIssuedAt();
    14. 		Date d2 = parseJwt.getExpiration();
    15. 		System.out.println("令牌签发时间：" + sdf.format(d1));
    16. 		System.out.println("令牌过期时间：" + sdf.format(d2));
    17. 	}

    2.3测试JWT的有效时间

    1. 	@Test
    2. 	public void test4() {// 测试JWT的有效时间
    3. 		Map claims = new HashMap();
    4. 		claims.put("username", "zss");
    5. 		String jwt = JwtUtils.createJwt(claims, 3 * 1000L);
    6. 		System.out.println(jwt);
    7. 		Claims parseJwt = JwtUtils.parseJwt(jwt);
    8. 		Date d1 = parseJwt.getIssuedAt();
    9. 		Date d2 = parseJwt.getExpiration();
    10. 		System.out.println("令牌签发时间：" + sdf.format(d1));
    11. 		System.out.println("令牌过期时间：" + sdf.format(d2));
    12. 	}

    2.4复制Jwt

    1. @Test
    2. 	public void test3() {// 复制jwt，并延时30分钟
    3. 		String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ6a2luZyIsImV4cCI6MTY2MjM0Njg3MSwiaWF0IjoxNjYyMzQ1MDcxLCJhZ2UiOjE4LCJqdGkiOiI4YjllNzc3YzFlMDM0MjViYThmMDVjNTFlMTU3NDQ1MiIsInVzZXJuYW1lIjoienNzIn0.UWpJxPxwJ09PKxE2SY5ME41W1Kv3jP5bZGKK-oNUDuM";
    4. 		//String newJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MDU3NTM2NTUsImlhdCI6MTYwNTc1MTg1NSwiYWdlIjoxOCwianRpIjoiYmNmN2Q1MzQ2YjE3NGU2MDk1MmIxYzQ3ZTlmMzQyZjgiLCJ1c2VybmFtZSI6InpzcyJ9.m1Qn84RxgbKCnsvrdbbAnj8l_5Jwovry8En0j4kCxhc";
    5. 		//String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NjI5MDMzNjAsImlhdCI6MTU2MjkwMTU2MCwiYWdlIjoxOCwianRpIjoiZDVjMzE4Njg0MDcyNDgyZDg1MDE5ODVmMDY3OGQ4NjkiLCJ1c2VybmFtZSI6InpzcyJ9.XDDDRRq5jYq5EdEBHtPm7GcuBz4S0VhDTS1amRCdf48";
    6. 		String newJwt = JwtUtils.copyJwt(oldJwt, JwtUtils.JWT_WEB_TTL);
    7. 		System.out.println(newJwt);
    8. 		Claims parseJwt = JwtUtils.parseJwt(newJwt);
    9. 		for (Map.Entry entry : parseJwt.entrySet()) {
    10. 			System.out.println(entry.getKey() + "=" + entry.getValue());
    11. 		}
    12. 		Date d1 = parseJwt.getIssuedAt();
    13. 		Date d2 = parseJwt.getExpiration();
    14. 		System.out.println("令牌签发时间：" + sdf.format(d1));
    15. 		System.out.println("令牌过期时间：" + sdf.format(d2));
    16. 	}

    3.实例 

    3.1打开Jwt校验

    3.2 实现效果

    定义jwt变量（state.js）

    设置值（muntionis.js）
    1.   setJwt:(state,payload)=>{
    2.        //state 就是 state.js文件导出的参数
    3.        // payload vue 传递的参数
    4.        state.jwt=payload.jwt;
    5.     }
     getters.js取值
    1.  getJwt:(state)=>{
    2.      return state.jwt;
    3.     }
    在Http.js设置拦截请求
    1.  
    2. // 请求拦截器
    3. axios.interceptors.request.use(function(config) {
    4.   let jwt= window.vm.$store.getters.getJwt;
    5.   if(jwt){
    6.      config.headers['jwt'] = jwt;
    7.   }
    8.  
    9.   return config;
    10. }, function(error) {
    11.   return Promise.reject(error);
    12. });
    13.  
    14. // 响应拦截器
    15. axios.interceptors.response.use(function(response) {
    16.   let jwt = response.headers['jwt'];
    17.   if(jwt){
    18.     window.vm.$store.commit('setJwt', {
    19.       jwt:jwt
    20.     });
    21.   }
    22.  
    23.   return response;
    24. }, function(error) {
    25.   return Promise.reject(error);
    26. });

     3.3效果展示

  • 相关阅读:
    轻量封装WebGPU渲染系统示例＜36＞- 广告板(Billboard)(WGSL源码)
    小目标检测3_注意力机制_Self-Attention
    Java on Azure Tooling 10月更新｜Roadmap 更新与 Azure Functions 部署槽支持
    5G业务正式商用，属于广电的机会在哪？
    HarmonyOS学习——HarmonyOS习题
    我屮艸芔茻，mongo居然可以自动删除数据
    参考线平滑-FemPosDeviation-Ipopt
    【Python进阶-PyQt5】00搭建PyQt5环境
    Android内存分析
    安装教程之Windows 11安装Linux子系统并运行Linux GUI应用
  • 原文地址：https://blog.csdn.net/lz17267861157/article/details/133786988