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-zA-Z0-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

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