目录:
1.Jwt简介
2.前端处理Jwt
3.后端处理Jwt
引子:
随着我们前后端的分离,那么我们后端服务器的压力不会太大,前端也基本能独立出去。
将前后端交互连接起来的时候,用的是axios,但是为了我们的隐私,安全等。当然在以前不跨域的情况下,我们可以通过session来保存,在通过后台服务器进行判断,也能保障我们的身份安全验证。
因此:
我们在跨域进行安全验证操作时,我们可以做域头的处理.,通过域头传jwt过去
Jwt也成为解决跨域身份验证的实用技术
1.Jwt简介
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)
JWT结构原理图:
这是我们传统开发对资源的访问限制利用session完成图解:
jwt具体思路:
在登录时,我们前端的请求拦截器自动通过键值对形式插入jwt令牌request Header,
当发送请求时,我们的后端就会生成我们的jwt令牌(reponse),这时候我们的前端就会有响应拦截器,获取到我们jwt的具体的密钥值,因此我们在之后进行的每次请求时,凭着第一段的密钥就能进行权限的访问,在响应,如此反复。当然,在设定时间内,未进行操作就会失效。
jwt所解决的问题及机制图解
2.前端处理Jwt
state.js
export default {
resturantName: '飞歌餐馆',
jwt:null
}
mutations.js
export default {
setResturantName: (state, payload) => {
state.resturantName = payload.resturantName;
},
setJwt: (state, payload) => {
state.jwt = payload.jwt;
}
}
getters.js
export default {
getResturantName: (state) => {
return state.resturantName;
},
getJwt: (state) => {
return state.jwt;
}
}
main.js(因为无法通过this获取到store,因此我们设置一个更大的容器)
window.vm = new Vue({
el: '#app',
data(){
return {
Bus:new Vue({
})
}
},
router,
store,
components: { App },
template: '<App/>'
})
http.js(客户端生成jwt,在通过后台把jwt的值存进客户端)
// 请求拦截器
axios.interceptors.request.use(function(config) {
//将jwt令牌塞到request.Headers里面
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;
//将jwt令牌塞到response Headers里面
var jwt = response.headers['jwt'];
if (jwt) {
windo