• jwt简介


    目录

    1、jwt出现的原因及工作原理

    1.1、session的存储机制

    1.2、jwt是什么 JSON Web Token(JWT)它是目前使用最多的跨域身份验证解决方案

    1.3、为什么使用jwt jwt的精髓在于 "中心化",数据是保存在客户端的

    1.4、jwt运行机制/原理  

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

    2.1、jwt实现

    3、jwt工具介绍,三种场景

    3.1、jwt工具类

    3.2、jwtUtils


    1、jwt出现的原因及工作原理

    1.1、session的存储机制

    1.2、jwt是什么 JSON Web Token(JWT)它是目前使用最多的跨域身份验证解决方案

    1.3、为什么使用jwt jwt的精髓在于 "中心化",数据是保存在客户端的

    1.4、jwt运行机制/原理  

    1、第一次发送登录请求,必然会携带用户信息uname和pwd

    2、通过用户信息uname和pwd登录成功,会将用户信息通过jwt工具类生成一个加密的字符串

    3、加密字符串 会以response header 响应头的形式 相应到前端

    4、前端服务器会有响应拦截器拦截,截取到响应头承载的jwt串,又会放到Vuex中

    5、当第二次请求,前端服务器中有一个请求拦截器,会将Vuex中的jwt串放入 request header 请求当中

    6、当请求通过跨域的方式到达后台服务器,后台服务器中又有一个过滤器,会截取到 request header 请求当中的jwt串

    7、jwt工具类会对jwt串进行解析,解析成用户信息,最终进行校验

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

    2.1、jwt实现

    现在我们没使用到jwt的时候,我们的项目还能够正常访问到:

    1. package com.zking.vue.util;
    2. import java.io.IOException;
    3. import java.util.regex.Matcher;
    4. import java.util.regex.Pattern;
    5. import javax.servlet.Filter;
    6. import javax.servlet.FilterChain;
    7. import javax.servlet.FilterConfig;
    8. import javax.servlet.ServletException;
    9. import javax.servlet.ServletRequest;
    10. import javax.servlet.ServletResponse;
    11. import javax.servlet.http.HttpServletRequest;
    12. import javax.servlet.http.HttpServletResponse;
    13. import io.jsonwebtoken.Claims;
    14. /**
    15. * * JWT验证过滤器,配置顺序 :CorsFilte-->JwtFilter-->struts2中央控制器
    16. *
    17. * @author Administrator
    18. *
    19. */
    20. public class JwtFilter implements Filter {
    21. // 排除的URL,一般为登陆的URL(请改成自己登陆的URL)
    22. private static String EXCLUDE = "^/vue/userAction_login\\.action?.*$";
    23. private static Pattern PATTERN = Pattern.compile(EXCLUDE);
    24. private boolean OFF = true;// true关闭jwt令牌验证功能
    25. @Override
    26. public void init(FilterConfig filterConfig) throws ServletException {
    27. }
    28. @Override
    29. public void destroy() {
    30. }
    31. @Override
    32. public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
    33. throws IOException, ServletException {
    34. HttpServletRequest req = (HttpServletRequest) request;
    35. HttpServletResponse resp = (HttpServletResponse) response;
    36. String path = req.getServletPath();
    37. if (OFF || isExcludeUrl(path)) {// 登陆直接放行
    38. chain.doFilter(request, response);
    39. return;
    40. }
    41. // 从客户端请求头中获得令牌并验证
    42. String jwt = req.getHeader(JwtUtils.JWT_HEADER_KEY);
    43. Claims claims = this.validateJwtToken(jwt);
    44. if (null == claims) {
    45. // resp.setCharacterEncoding("UTF-8");
    46. resp.sendError(403, "JWT令牌已过期或已失效");
    47. return;
    48. } else {
    49. String newJwt = JwtUtils.copyJwt(jwt, JwtUtils.JWT_WEB_TTL);
    50. resp.setHeader(JwtUtils.JWT_HEADER_KEY, newJwt);
    51. chain.doFilter(request, response);
    52. }
    53. }
    54. /**
    55. * 验证jwt令牌,验证通过返回声明(包括公有和私有),返回null则表示验证失败
    56. */
    57. private Claims validateJwtToken(String jwt) {
    58. Claims claims = null;
    59. try {
    60. if (null != jwt) {
    61. claims = JwtUtils.parseJwt(jwt);
    62. }
    63. } catch (Exception e) {
    64. e.printStackTrace();
    65. }
    66. return claims;
    67. }
    68. /**
    69. * 是否为排除的URL
    70. *
    71. * @param path
    72. * @return
    73. */
    74. private boolean isExcludeUrl(String path) {
    75. Matcher matcher = PATTERN.matcher(path);
    76. return matcher.matches();
    77. }
    78. // public static void main(String[] args) {
    79. // String path = "/sys/userAction_doLogin.action?username=zs&password=123";
    80. // Matcher matcher = PATTERN.matcher(path);
    81. // boolean b = matcher.matches();
    82. // System.out.println(b);
    83. // }
    84. }

     接下把jwt的验证 开启,即在JwtFilter类中:

      再去重启,刷新项目:

    数据访问不到了:

    原因是还没有开始编写jwt。(但是我们的登录和退出功能仍然可以正常运行)

    后台:

    UserAction :

    1. package com.zking.vue.web;
    2. import java.util.HashMap;
    3. import java.util.Map;
    4. import com.fasterxml.jackson.databind.ObjectMapper;
    5. import com.opensymphony.xwork2.ModelDriven;
    6. import com.zking.base.web.BaseAction;
    7. import com.zking.vue.biz.UserBiz;
    8. import com.zking.vue.entity.User;
    9. import com.zking.vue.util.JsonData;
    10. import com.zking.vue.util.JwtUtils;
    11. import com.zking.vue.util.PageBean;
    12. import com.zking.vue.util.ResponseUtil;
    13. import com.zking.vue.util.StringUtils;
    14. public class UserAction extends BaseAction implements ModelDriven<User>{
    15. private UserBiz userBiz;
    16. private User user = new User();
    17. public UserBiz getUserBiz() {
    18. return userBiz;
    19. }
    20. public void setUserBiz(UserBiz userBiz) {
    21. this.userBiz = userBiz;
    22. }
    23. public String login() {
    24. ObjectMapper om = new ObjectMapper();
    25. JsonData jsonData = null;
    26. try {
    27. if(StringUtils.isBlank(user.getUname()) || StringUtils.isBlank(user.getPwd())) {
    28. jsonData = new JsonData(0, "用户或者密码为空", user);
    29. }else {
    30. User u = this.userBiz.login(user);
    31. Map<String, Object> claims = new HashMap<String, Object>();
    32. claims.put("uname",user.getUname());
    33. claims.put("pwd", user.getPwd());
    34. String jwt = JwtUtils.createJwt(claims, JwtUtils.JWT_WEB_TTL);
    35. response.setHeader(JwtUtils.JWT_HEADER_KEY, jwt);
    36. jsonData = new JsonData(1, "登录成功", u);
    37. }
    38. } catch (Exception e) {
    39. e.printStackTrace();
    40. jsonData = new JsonData(0, "用户或者密码错误", user);
    41. }finally {
    42. try {
    43. ResponseUtil.write(response, om.writeValueAsString(jsonData));
    44. } catch (Exception e) {
    45. e.printStackTrace();
    46. }
    47. }
    48. return null;
    49. }
    50. public String getAsyncData() {
    51. ObjectMapper om = new ObjectMapper();
    52. try {
    53. Thread.sleep(6000);
    54. ResponseUtil.write(response, om.writeValueAsString("http://www.javaxl.com"));
    55. } catch (Exception e) {
    56. e.printStackTrace();
    57. }
    58. return null;
    59. }
    60. @Override
    61. public User getModel() {
    62. return user;
    63. }
    64. }

    前台:

    mutations.js:

    1. export default {
    2. setResName:(state,payload)=>{
    3. // state对象就对应了state.js中的对象
    4. // payload载荷 对应的 传递的 json对象参数{name:zs,age:24}
    5. state.resName=payload.resName;
    6. },
    7. setJwt:(state,payload)=>{
    8. state.jwt=payload.jwt;
    9. }
    10. }

    getters.js:

    1. export default {
    2. getResName:(state)=>{
    3. return state.resName;
    4. },
    5. getJwt:(state)=>{
    6. return state.jwt;
    7. }
    8. }

    state.js:

    1. export default {
    2. resName:'来财餐馆',
    3. jwt:''
    4. }

    main.js:

    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. //开发环境下才会引入mockjs
    5. //process.env.MOCK为false,那么require('@/mock')就不执行;
    6. // process.env.MOCK在生产环境下为false
    7. // process.env.MOCK && require('@/mock')
    8. import ElementUI from 'element-ui' // 新添加 1
    9. import 'element-ui/lib/theme-chalk/index.css' // 新添加 2 ,避免后期打包样式
    10. import App from './App'
    11. import router from './router'
    12. import axios from '@/api/http' //vue项目对axios的全局配置
    13. // import axios from 'axios'
    14. import VueAxios from 'vue-axios'
    15. import store from './store'
    16. Vue.use(ElementUI);//新添加 3
    17. Vue.use(VueAxios,axios);
    18. Vue.config.productionTip = false
    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. components: { App },
    32. template: ''
    33. })

    http.js:

    1. /**
    2. * vue项目对axios的全局配置
    3. */
    4. import axios from 'axios'
    5. import qs from 'qs'
    6. //引入action模块,并添加至axios的类属性urls上
    7. import action from '@/api/action'
    8. axios.urls = action
    9. // axios默认配置
    10. axios.defaults.timeout = 10000; // 超时时间
    11. // axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默认地址
    12. axios.defaults.baseURL = action.SERVER;
    13. //整理数据
    14. // 只适用于 POST,PUT,PATCH,transformRequest` 允许在向服务器发送前,修改请求数据
    15. axios.defaults.transformRequest = function(data) {
    16. data = qs.stringify(data);
    17. return data;
    18. };
    19. // 请求拦截器
    20. axios.interceptors.request.use(function(config) {
    21. var jwt = window.vm.$store.getters.getJwt;
    22. config.headers['jwt'] = jwt;
    23. return config;
    24. }, function(error) {
    25. return Promise.reject(error);
    26. });
    27. export default axios;

    再次刷新项目,项目访问数据即出来了:

    3、jwt工具介绍,三种场景

    3.1、jwt工具类

    3.2、jwtUtils

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

    JWT的数据结构:

    前台建立test包测试即可:

    JwtDemo:

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

  • 相关阅读:
    vue3中祖孙组件之间的通信provide和inject
    (windows ssh) windows开启ssh服务,并通过ssh登录该win主机
    c++常用函数所在头文件一览
    js:Lodash一个JavaScript 实用工具库
    【Python】正则表达式判断是否存在连续N个字母
    门口通畅家运顺
    Java · 链表概念以及结构 · 单链表接口实现 · 双向链表接口实现
    项目(智慧教室)第一部分:cubemx配置,工程文件的移植,触摸屏的检测,项目bug说明
    Django框架的推导
    学习笔记02-iview组件使用
  • 原文地址:https://blog.csdn.net/m0_65774688/article/details/126900923