JWT（简介）

目录

一、JWT的作用和工作原理

1.JWT是什么

2.为什么使用JWT

3.JWT组成

4.JWT的运行机制原理

二、JWT与Vuex配合在SPA项目中使用

JWT实现

三、jwt工具类介绍，三种场景

        JWT工具类

---

一、JWT的作用和工作原理

传统的Session的存储机制（图解）

传统的开发，要对系统的资源进行保护，那么会用到session机制来完成，那么session是跟随tomcat服务器，那也就以为session在前后端分离中的后端服务器中，而浏览器请求的确是前端服务器（nodeJS），这也就意味着在浏览输入网址（路由跳组件）的时候，它并不能获取到session，也就是说目前存在缺陷，你不登陆，也能够对其他的组件将进行一个访问

1.JWT是什么

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

2.为什么使用JWT

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

 3.JWT组成

由三部分组成：头部(Header)、载荷(Payload)与签名(signature)

头部（Header）：

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

载荷（Payload）：

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

签名（signature）：

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

数据结构图：

 

4.JWT的运行机制原理

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

2.通过用户信息uname和pwd登录成功，会将用户信息通过jwt工具类生成一个加密的字符串

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

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

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

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

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

图解：

 

二、JWT与Vuex配合在SPA项目中使用

JWT实现

当我们JWT还未开启