JWT 使用Base-64解码前端 token

时间：2021-11-09 18:31:00

 JWT   token  前端解码

JWT全称为json web token,他的本质是一个对JSON对象加密后的字符串，当服务器认证通过后一个包含用户信息的josn对象，返给用户，典型的JWT由三个部分组成，每一个部分由点（.）分隔，这样就构成JWT，
　　例子如下：header.payload.signature
　　eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ (三种不同的信息)
　　第一部分：红色 我们称他为头部（header）    
　　第二部分：绿色 我们称它为载荷（payload）  ---------这部分为后端JAVA为我们加密后的数据，我们需要在前端将第二段数据分割出来，然后再去解析他
　　第三部分：蓝色 我们称它为签证（signature）
头部 Header：
　　头部包含所使用的签名算法和令牌的类型(即JWT)，这部分会被编码为Base64URL格式。Header部分主要存储关于签名算法的信息，通常不包含两个部分：token类型和采用的加密算法，大致源内容如下：
　　　　{ "alg": "HS256", "typ": "JWT"} ，然后使用Base64Url编码组成了Header部分，结果大致如：eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9。
载荷 Payload：
　　载荷嘛，就是装东西的，在我们行业来说，装的就是数据啦，他是一个数据实体，他默认这一部分数据是业务数据，可有可无，可多可少，嘿嘿 ，你说了算！！！一般在不修改数据的情况下，主要包含以下几部分：iss（签发者）,exp（过期时间戳）, sub（面向的用户）, aud（接收方）, iat（签发时间），大致的源样式是这样：
　　{ {name: "刘鑫", virtualPhone: ""}}，经过Base64Url 编码以后，会变成JWT的第二部分字符串：eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9。
　　也说过了，这一部分就是我们想获取到的数据，主要解析方法为：

　　let token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ'     获取token
　　let user = decodeURIComponent(escape(window.atob(msg.split('.')[1])))      将JWT切割   获取需要的载荷
　　let res = JSON.parse(user).name     将获取的字符串转换成JSON对象
　　let res = JSON.parse(user).virtualPhone    获取需要的数据

 

　　

 

　转换结果如下  有图有真相：

　　JWT 使用Base-64解码前端 token（emmmm，有的数据是空的~）

　　　上面提到了window.atob（）这个函数，不知道大家有没有关注过，这个函数呢，，，emmmm   主要是用于解码使用 base-64 编码的字符串，base64编码的使用方法就是btoa（），而用于解码的使用方法是atob（），

　　　　　而base64 又是什么呢？   Base64是一种基于64个可打印字符来表示二进制数据的表示方法，就是一种编码转换方式，

　　　　　将ASCII字符转换成普通文本, 是网络上最常见的用于传输8Bit字节代码的编码方式之一。base64由字母a-z、A-Z、0-9以及+和/, 再加上作为垫字的=, 一共65字符组成一个基本字符集, 其他所有字符都可以根据一定规则, 转换成该字符集中的字符。

　　　　我们在写app的时候，因为使用了uni-app框架，uni-app这个框架不支持安装包，这个base64其实是有源码js的，但是因为不支持安装，所以只能直接扒了，其实也很简单，可以直接在网上寻找一个源码包，然后在你需要用的组件中直接引入就好了

　　　　引入文件：

　　　　　　　　//引入Base64解码
　　　　　　import {Base64} from "../../static/js/jwt.js"

　　　　解密：

　　　　　　　　//解密token
　　　　　　let b64 = Base64.decode(token)

　　　　这样就解密完成了，可以获取到我们相用的数据了，注意一下类型就好~~~~  另外附加~~~ 加密为 ：let b64 = Base64.encode(token)

　　签名 signature：Signature部分是对前两部分的防篡改签名。将Header和Payload用Base64URL编码后，再用点(.)连接起来。然后使用签名算法和密钥对这个字符串进行签名

　　　　　signature = hmac_sha256(base64encode(header) + '.' + base64encode(payload), 'MY_SUPER_SECRET_KEY')

　　　　　这个密钥（MY_SUPER_SECRET_KEY）只有服务器才知道，不能泄露给用户。

　　　　　签名信息：TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

　　综上就组成了一个完整的JWTheader.payload.signature：

　　　　　　eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

到此结束~~~   如果有不足的 还请各位大佬纠正~

　　

 

标签：

相关文章