vue12Jwt详解+JWT组成+JWT的验证过程+JWT令牌刷新思路+代码

目录

1. JWT是什么

2. 为什么使用JWT

3. JWT的工作原理:

4. JWT组成

JWT结构原理图：

 JWT实际结构：

        4.1 Header

        4.2 Payload(负荷) 

        4.3 signature

5. JWT的验证过程

6. JWT令牌刷新思路

---

1. JWT是什么

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

2. 为什么使用JWT

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

3. JWT的工作原理

1. 是在服务器身份验证之后，将生成一个JSON对象并将其发送回用户

{"UserName": "Chongchong","Role": "Admin","Expire": "2018-08-08 20:15:56"}

2. 之后，当用户与服务器通信时，客户在请求中发回JSON对象JWT

3. 为了防止用户篡改数据，服务器将在生成对象时添加签名，并对发回的数据进行验证

4. JWT组成

一个JWT实际上就是一个字符串，它由三部分组成：头部(Header)、载荷(Payload)与签名(signature)

JWT结构原理图：

 JWT实际结构：

eyJhbGciOiJIUzI1NiJ9.
                eyJzdWIiOiJ7fSIsImlzcyI6InpraW5nIiwiZXhwIjoxNTYyODUwMjM3LCJpYXQiOjE1NjI4NDg0MzcsImp0aSI6ImM5OWEyMzRmMDc4NzQyZWE4YjlmYThlYmYzY2VhNjBlIiwidXNlcm5hbWUiOiJ6c3MifQ.
                WUfqhFTeGzUZCpCfz5eeEpBXBZ8-lYg1htp-t7wD3I4

它是一个很长的字符串，中间用点（.）分隔成三个部分。注意，JWT 内部是没有换行的，这里只是为了便于展示，将它写成了几行。

写成一行，就是下面的样子：Header.Payload.Signature

        4.1 Header

{"typ":"JWT","alg":"HS256"}

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

        4.2 Payload(负荷)

{"sub":"123","name":"Tom","admin":true}

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

注1：英文“claim”就是要求的意思

注2：如上面结构中的sub代表这个token的所有人，存储的是所有人的ID；name表示这个所有人的名字；admin表示所有人是否管理员的角色。 当后面对JWT进行验证的时候，这些claim都能发挥特定的作用

注3：根据JWT的标准，这些claims可以分为以下三种类型：
           A. Reserved claims(保留)
              它的含义就像是编程语言的保留字一样，属于JWT标准里面规定的一些claim。JWT标准里面定义好的claim有：
              iss(Issuser)：代表这个JWT的签发主体；