​本文已参与「新人创作礼」活动，一起开启掘金创作之路。​ ​

前言

在如今得环境下，越来越多得项目采用微服务，前后端分离项目。优点在于同时开发，分开部署。缺点在于需要约定的太多，导致前后端联调产生分歧。就标题而言，解决前端antd 接收后台返回的jwt token字符串 进行解析做记录。

关于jwt

JWT令牌的优点：

jwt基于json，非常方便解析
可以再令牌中自定义丰富的内容，易扩展（payload可以扩展）
通过签名，让JWT防止被篡改，安全性高
资源服务使用JWT可不依赖认证服务即可完成授权

jwt使用场景

• Authorization (授权) : 这是最基本的使用场景，可以鉴权，保护资源。开销小使它更加迅捷方便，安全。
• Information Exchange (信息交换) : 采用签名的方式，所以安全级别比较高。可以换取信息的同时，还可以验证传输的内容是否被篡改。

jwt组成

三部分组成(其他的不做过多介绍,又不是本文的主题 ha ha ha ~~~)

第一部分我们称它为头部（header),第二部分我们称其为载荷（payload, 类似于飞机上承载的物品)，第三部分是签证（signature).

例如：

eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ8.eyJhdWQiOlsic2VydmljZS1hcnRpY2xlIiwic2VydmljZS1hdXRoIl0sImZ1bmN0aW9uTGlzdCI6ImhhaCIsInVzZXJfbmFtZSI6IjEzMDY2NzY2MTkzIiwic2NvcGUiOlsiYWxsIl0sIm5hbWUiOiLlvKDkuInkuLAiLCJleHAiOjE2MDUyNDM1MjUsImF3dGhvcml0aWVzIjpbImJhc2ljLmFkZCJdLCJqdGkiOiIzZjI0NzI1NC0zMzVhLTQ5MGItOTEyZC1jYTBhYWRkZmVkOTMiLCJjbGllbnRfaWQiOiJwYyJ9.xTKDzfxwGZVwIMf3nm4C8f0bfoEKy1AVqDO1LNGDjz9z4UCRJmSyTXAYAx3Ph_GHLKIa3IGpMoVz1aAwKwZ2GqpFI1uKwReK4Nl8K92pHUwNNFxkbhPcOauWjsrw5BDHn3jBOC2GhUTrY0kifaJ4FjAAIbyVGr04VhZMp6sYdfrWUVLHm3d848RR3JW_OvMJfWOnuRJ-T1SMho9buLmSKUtBexWXb-uQY72BicGRJIrSJk4QlGHYzb4jss39DFU_bszLXJXoM4ho8n-qmUdjy0gmhr-csIbctSCEVZeTyKO_KJ9HrU6UgnIjErj-fCJVXElXaddkZpjpthTQf-I8iA

对第一部分header进行base64url解密，得到header
对第二部分payload进行base64url解密，得到payload
对第三部分crypto进行base64url解密，得到signature

解析

let tokenString = 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ8.eyJhdWQiOlsic2VydmljZS1hcnRpY2xlIiwic2VydmljZS1hdXRoIl0sImZ1bmN0aW9uTGlzdCI6ImhhaCIsInVzZXJfbmFtZSI6IjEzMDY2NzY2MTkzIiwic2NvcGUiOlsiYWxsIl0sIm5hbWUiOiLlvKDkuInkuLAiLCJleHAiOjE2MDUyNDM1MjUsImF3dGhvcml0aWVzIjpbImJhc2ljLmFkZCJdLCJqdGkiOiIzZjI0NzI1NC0zMzVhLTQ5MGItOTEyZC1jYTBhYWRkZmVkOTMiLCJjbGllbnRfaWQiOiJwYyJ9.xTKDzfxwGZVwIMf3nm4C8f0bfoEKy1AVqDO1LNGDjz9z4UCRJmSyTXAYAx3Ph_GHLKIa3IGpMoVz1aAwKwZ2GqpFI1uKwReK4Nl8K92pHUwNNFxkbhPcOauWjsrw5BDHn3jBOC2GhUTrY0kifaJ4FjAAIbyVGr04VhZMp6sYdfrWUVLHm3d848RR3JW_OvMJfWOnuRJ-T1SMho9buLmSKUtBexWXb-uQY72BicGRJIrSJk4QlGHYzb4jss39DFU_bszLXJXoM4ho8n-qmUdjy0gmhr-csIbctSCEVZeTyKO_KJ9HrU6UgnIjErj-fCJVXElXaddkZpjpthTQf-I8iA';
let user = JSON.parse(decodeURIComponent(escape(window.atob(tokenString.split('.')[1]))))
console.log("user", user)

结果:

​

新方法：

1.安装jwt模块
npm install jsonwebtoken
2.在js文件中引用
var jwt = require(“jsonwebtoken”);
3.解码
jwt.decode(‘token’)

总结

该解析其实不是react专用写法，本身是一个js写法，只不过适用于react,在于平常积累。如有问题请指导，勿喷，感激不尽。

​