Jwt身份安全验证

最新推荐文章于 2025-03-22 20:37:30 发布

trasewell

最新推荐文章于 2025-03-22 20:37:30 发布

阅读量8k

点赞数 2

本文链接：https://blog.youkuaiyun.com/trasewell/article/details/99701941

版权

本文介绍了JWT（JSON Web Token）作为跨域身份验证的解决方案。JWT的工作原理包括其三部分组成：头部、载荷和签名。前端在登录时将JWT令牌插入请求头，后端生成JWT并在后续请求中验证。前端处理JWT涉及state.js、mutations.js、getters.js和http.js等文件，后端通过JWT验证过滤器进行处理。文章还包含了JWT解决的安全问题和机制图解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录:
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