如何在一分钟了解jwt

目录

一.session的存储机制

二.jwt的工作原理

三.JWT是什么？

四.为什么使用JWT

五.jwt的运行机制/原理：****

六.jwt工具类介绍，三种场景

七.jwt与vuex配合在SPA项目中的应用 

---

一.session的存储机制

 

二.jwt的工作原理

1.原理图：

 

三.JWT是什么？

 JSON Web Token (JWT)，它是目前最流行的跨域身份验证解决方案

四.为什么使用JWT

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

五.jwt的运行机制/原理：****

1.第一次发送请求，必然会携带用户信息uname和pwd

2.通过用户名密码登陆成功，会将用户信息通过jwt工具类生成一个加密的字符串

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

4.前端服务器会有响应拦截器拦截，截取到响应头承载jwt的字符串，会放到vuex中

5.当二次请求，前端服务器中有一个请求拦截器，会将vuex中的jwt字符串放入request header请求中

6.当请求通过跨域的方式到后台服务器，后台服务器中有一个过滤器，会截取到equest header 请求头中的jwt字符串

7.jwt工具类会对jwt字符串进行解析 解析成用户信息，最终校验

六.jwt工具类介绍，三种场景

JWT组成
一个JWT实际上就是一个字符串，它由三部分组成：头部(Header)、载荷(Payload)与签名(signature)
它是一个很长的字符串，中间用点（.）分隔成三个部分。注意，JWT 内部是没有换行的，这里只是为了便于展示，将它写成了几行。
写成一行，就是下面的样子：Header.Payload.Signature
 

.Header
{“typ”:“JWT”,“alg”:“HS256”}
这个json中的typ属性，用来标识整个token字符串是一个JWT字符串；它的alg属性，用来说明这个JWT签发的时候所使用的签名和摘要算法
typ跟alg属性的全称其实是type跟algorithm，分别是类型跟算法的意思。之所以都用三个字母来表示，也是基于JWT最终字串大小的考虑，
同时也是跟JWT这个名称保持一致，这样就都是三个字符了…typ跟alg是JWT中标准中规定的属性名称
 

Payload(负荷)
{“sub”:“123”,“name”:“Tom”,“admin”:true}
payload用来承载要传递的数据，它的json结构实际上是对JWT要传递的数据的一组声明，这些声明被JWT标准称为claims，
它的一个“属性值对”其实就是一个claim(要求)，
每一个claim的都代表特定的含义和作用。
 

signature
签名是把header和payload对应的json结构进行base64url编码之后得到的两个串用英文句点号拼接起来，然后根据header里面alg指定的签名算法生成出来的。
算法不同，签名结果不同。以alg: HS256为例来说明前面的签名如何来得到。
按照前面alg可用值的说明，HS256其实包含的是两种算法：HMAC算法和SHA256算法，前者用于生成摘要，后者用于对摘要进行数字签名。这两个算法也可以用HMACSHA256来统称
 

JWT的验证过程
它验证的方法其实很简单，只要把header做base64url解码，就能知道JWT用的什么算法做的签名，然后用这个算法，再次用同样的逻辑对header和payload做一次签名，
并比较这个签名是否与JWT本身包含的第三个部分的串是否完全相同，只要不同，就可以认为这个JWT是一个被篡改过的串，自然就属于验证失败了。
接收方生成签名的时候必须使用跟JWT发送方相同的密钥
 

七.jwt与vuex配合在SPA项目中的应用 

  http.js:

/**
 * vue项目对axios的全局配置
 */
import axios from 'axios'
import qs from 'qs'
 
//引入action模块，并添加至axios的类属性urls上
import action from '@/api/action'
axios.urls = action
 
// axios默认配置
axios.defaults.timeout = 10000; // 超时时间
// axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默认地址
axios.defaults.baseURL = action.SERVER;
 
//整理数据
// 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
axios.defaults.transformRequest = function(data) {
	data = qs.stringify(data);
	return data;
};
 
 
// 请求拦截器
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) {
	debugger;
	var jwt = response.headers['jwt'];
	if(jwt){
		window.vm.$store.commit('setJwt',{jwt:jwt});
	}
	return response;
}, function(error) {
	return Promise.reject(error);
});
 
// // 路由请求拦截
// // http request 拦截器
// axios.interceptors.request.use(
// 	config => {
// 		//config.data = JSON.stringify(config.data);
// 		//config.headers['Content-Type'] = 'application/json;charset=UTF-8';
// 		//config.headers['Token'] = 'abcxyz';
// 		//判断是否存在ticket，如果存在的话，则每个http header都加上ticket
// 		// if (cookie.get("token")) {
// 		// 	//用户每次操作，都将cookie设置成2小时
// 		// 	cookie.set("token", cookie.get("token"), 1 / 12)
// 		// 	cookie.set("name", cookie.get("name"), 1 / 12)
// 		// 	config.headers.token = cookie.get("token");
// 		// 	config.headers.name = cookie.get("name");
// 		// }
// 		return config;
// 	},
// 	error => {
// 		return Promise.reject(error.response);
// 	});
 
// // 路由响应拦截
// // http response 拦截器
// axios.interceptors.response.use(
// 	response => {
// 		if (response.data.resultCode == "404") {
// 			console.log("response.data.resultCode是404")
// 			// 返回 错误代码-1 清除ticket信息并跳转到登录页面
// 			//      cookie.del("ticket")
// 			//      window.location.href='http://login.com'
// 			return
// 		} else {
// 			return response;
// 		}
// 	},
// 	error => {
// 		return Promise.reject(error.response) // 返回接口返回的错误信息
// 	});
 
 
 
export default axios;

state.js:

export default{
  resName:'啵颜悦色！',
  jwt:''
 
}

mutation.js:

export default{
  setResName:(state,payload)=>{
    //state对象就对应了state.js中的对象
    //payload载荷对应的传递的json对象参数{name:zs,age:12}
    state.resName = payload.resName;
 
  },
  setJwt:(state,payload)=>{
    state.jwt = payload.jwt;
  }
}

getters.js:

export default {
  getResName: (state) => {
    return state.resName;
  },
  getJwt(state) => {
    return state.Jwt;
  }
}

效果图