目录
2.修改com.zking.ssm.jwt.JwtFilter中的OFF为false开启
3.将controller/UserController中的注释解开
一、简介
-
1.JWT是什么
JSON Web Token (Jwt), 他是流行的跨域身份验证解决方案
-
2.为什么使用JWT
JWT的精髓在于: “去中心化”, 数据是保存在客户端的
-
3.JWT的工作原理
- 是在服务器身份验证之后,将生成一个JSON对象并将其发送回用户,示例如下:
- {“UserName”: “Chongchong”,“Role”: “Admin”,“Expire”: “2018-08-08 20:15:56”}
- 之后,当用户与服务器通信时,客户在请求中发回JSON对象
- 为了防止用户篡改数据,服务器将在生成对象时添加签名,并对发回的数据进行验证
-
4.JWT组成
一个JWT实际上就是一个字符串,它由三部分组成:头部(Header)、载荷(Payload)与签名(signature)
-
5.JWT的验证过程
它验证的方法其实很简单,只要把header做base64url解码,就能知道JWT用的什么算法做的签名,然后用这个算法,再次用同样的逻辑对header和payload做一次签名,
并比较这个签名是否与JWT本身包含的第三个部分的串是否完全相同,只要不同,就可以认为这个JWT是一个被篡改过的串,自然就属于验证失败了。
接收方生成签名的时候必须使用跟JWT发送方相同的密钥
注1:在验证一个JWT的时候,签名认证是每个实现库都会自动做的,但是payload的认证是由使用者来决定的。因为JWT里面可能会包含一个自定义claim。
所以它不会自动去验证这些claim,以jjwt-0.7.0.jar为例:
A 如果签名认证失败会抛出如下的异常:
io.jsonwebtoken.SignatureException: JWT signature does not match locally computed signature. JWT validity cannot be asserted and should not be trusted.
即签名错误,JWT的签名与本地计算机的签名不匹配
B JWT过期异常
io.jsonwebtoken.ExpiredJwtException: JWT expired at 2017-06-13T11:55:56Z. Current time: 2017-06-13T11:55:57Z, a difference of 1608 milliseconds. Allowed
注2:认证失败,返回401 Unauthorized响应
注3:认证服务作为一个Middleware HOOK 对请求进行拦截,首先在cookie中查找Token信息,如果没有找到,则在HTTP Authorization Head中查找
-
6.JWT令牌刷新思路
-
6.1 登陆成功后,将生成的JWT令牌通过响应头返回给客户端
6.2 WEB APP项目每次请求后台数据时(将JWT令牌从请求头中带过来),
验证通过,刷新JWT,并保存在响应头返回给客户端,有效时间30分钟
JwtFilter
注1:修改CorsFilter添加允许的新的请求头“jwt”
注2:原来在默认的请求上, 浏览器只能访问以下默认的 响应头
Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
如果想让浏览器能访问到其他的 响应头的话 需要在服务器上设置 Access-Control-Expose-Headers
Access-Control-Expose-Headers : ‘jwt’
// CorsFilter 允许客户端,发一个新的请求头jwt
resp.setHeader(“Access-Control-Allow-Headers”, “Origin,X-Requested-With, Content-Type, Accept, jwt”);
二、Demo
-
1.修改webapp/WEB-INF/web.xml
!--CrosFilter跨域过滤器--> 将<filter-class>com.zking.ssm.util.CorsFilter2</filter-class>修改为 <filter-class>com.zking.ssm.util.CorsFilter</filter-class>
-
2.修改com.zking.ssm.jwt.JwtFilter中的OFF为false开启
private boolean OFF = false;// true关闭jwt令牌验证功能
-
3.将controller/UserController中的注释解开
//私有要求claim // Map<String,Object> json=new HashMap<String,Object>(); // json.put("username", userVo.getUsername()); //生成JWT,并设置到response响应头中 // String jwt=JwtUtils.createJwt(json, JwtUtils.JWT_WEB_TTL); // response.setHeader(JwtUtils.JWT_HEADER_KEY, jwt);
-
4.在spa中的src/store/state.js中添加
jwt: ''
-
5.在src/store/mutations.js中添加
setJwt:function (state,payload){ state.jwt = payload.jwt }
-
6.在src/store/getter.js中添加
getJwt(state){ return state.jwt; }
-
7.修改src/api/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) { var jwt = response.headers['jwt']; if(jwt){ window.vm.$store.commit('setJwt',{jwt:jwt}); } return response; }, function(error) { return Promise.reject(error); });
-
8.修改main.js
/* eslint-disable no-new */ window.vm = new Vue({ el: '#app', data(){ return{ Bus: new Vue({}) } }, router, store, components: { App }, template: '<App/>' })