JWT使用

目录

一、简介

1.JWT是什么

2.为什么使用JWT

3.JWT的工作原理

4.JWT组成

5.JWT的验证过程      

6.JWT令牌刷新思路

二、Demo

1.修改webapp/WEB-INF/web.xml

2.修改com.zking.ssm.jwt.JwtFilter中的OFF为false开启

3.将controller/UserController中的注释解开

4.在spa中的src/store/state.js中添加

5.在src/store/mutations.js中添加

6.在src/store/getter.js中添加

7.修改src/api/http.js

8.修改main.js

---

一、简介

• 1.JWT是什么

        JSON Web Token (Jwt), 他是流行的跨域身份验证解决方案

• 2.为什么使用JWT

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

• 3.JWT的工作原理

1. 是在服务器身份验证之后，将生成一个JSON对象并将其发送回用户，示例如下：
2. {“UserName”: “Chongchong”,“Role”: “Admin”,“Expire”: “2018-08-08 20:15:56”}
3. 之后，当用户与服务器通信时，客户在请求中发回JSON对象
4. 为了防止用户篡改数据，服务器将在生成对象时添加签名，并对发回的数据进行验证

• 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/>'
  })