目录
1.session的存储机制
2.jwt的工作原理
3.jwt工具类介绍,三种场景
3.1.JWT组成
3.2.Header
3.3.Payload(负荷)
3.4.signature
3.5.JWT的验证过程
4.jwt与vuex配合在SPA项目中的应用
1.session的存储机制
2.jwt的工作原理
1.原理图:
2.JWT是什么?
JSON Web Token (JWT),它是目前最流行的跨域身份验证解决方案
3.为什么使用JWT
JWT的精髓在于:“去中心化”,数据是保存在客户端的。
4.jwt的运行机制/原理:****
1.第一次发送请求,必然会携带用户信息uname和pwd
2.通过用户名密码登陆成功,会将用户信息通过jwt工具类生成一个加密的字符串
3.加密的字符串会以response header响应头的形式响应到前端
4.前端服务器会有响应拦截器拦截,截取到响应头承载jwt的字符串,会放到vuex中
5.当二次请求,前端服务器中有一个请求拦截器,会将vuex中的jwt字符串放入request header请求中
6.当请求通过跨域的方式到后台服务器,后台服务器中有一个过滤器,会截取到equest header 请求头中的jwt字符串
7.jwt工具类会对jwt字符串进行解析 解析成用户信息,最终校验
3.jwt工具类介绍,三种场景
3.1.JWT组成
一个JWT实际上就是一个字符串,它由三部分组成:头部(Header)、载荷(Payload)与签名(signature)
它是一个很长的字符串,中间用点(.)分隔成三个部分。注意,JWT 内部是没有换行的,这里只是为了便于展示,将它写成了几行。
写成一行,就是下面的样子:Header.Payload.Signature
3.2.Header
{“typ”:“JWT”,“alg”:“HS256”}
这个json中的typ属性,用来标识整个token字符串是一个JWT字符串;它的alg属性,用来说明这个JWT签发的时候所使用的签名和摘要算法
typ跟alg属性的全称其实是type跟algorithm,分别是类型跟算法的意思。之所以都用三个字母来表示,也是基于JWT最终字串大小的考虑,
同时也是跟JWT这个名称保持一致,这样就都是三个字符了…typ跟alg是JWT中标准中规定的属性名称
3.3.Payload(负荷)
{“sub”:“123”,“name”:“Tom”,“admin”:true}
payload用来承载要传递的数据,它的json结构实际上是对JWT要传递的数据的一组声明,这些声明被JWT标准称为claims,
它的一个“属性值对”其实就是一个claim(要求),
每一个claim的都代表特定的含义和作用。
3.4.signature
签名是把header和payload对应的json结构进行base64url编码之后得到的两个串用英文句点号拼接起来,然后根据header里面alg指定的签名算法生成出来的。
算法不同,签名结果不同。以alg: HS256为例来说明前面的签名如何来得到。
按照前面alg可用值的说明,HS256其实包含的是两种算法:HMAC算法和SHA256算法,前者用于生成摘要,后者用于对摘要进行数字签名。这两个算法也可以用HMACSHA256来统称
3.5.JWT的验证过程
它验证的方法其实很简单,只要把header做base64url解码,就能知道JWT用的什么算法做的签名,然后用这个算法,再次用同样的逻辑对header和payload做一次签名,
并比较这个签名是否与JWT本身包含的第三个部分的串是否完全相同,只要不同,就可以认为这个JWT是一个被篡改过的串,自然就属于验证失败了。
接收方生成签名的时候必须使用跟JWT发送方相同的密钥
4.jwt与vuex配合在SPA项目中的应用
http.js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87/** * 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:
1
2
3
4
5
6export default{ resName:'冰冰餐馆!', jwt:'' }
mutation.js:
1
2
3
4
5
6
7
8
9
10
11
12export 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:
1
2
3
4
5
6
7
8
9export default { getResName: (state) => { return state.resName; }, getJwt(state) => { return state.Jwt; } }
效果:
最后
以上就是俭朴月亮最近收集整理的关于快速了解jwt的全部内容,更多相关快速了解jwt内容请搜索靠谱客的其他文章。
发表评论 取消回复