前言　

  什么是 JWT -- JSON WEB TOKEN   这是一个对JWT讲解特别好的文章

  首先前端生成JWT本身就是不对的，JWT应该在服务器生成，但是需求有了，是不能做还是不会做是两个事情。 我在网上找了好久JWT前端生成的插件，今天终于找到了，并且已经调通了，现记录一下。

前期准备

  这里推荐一个特别好的JWT官网，jwt.io/ 提供了在线验证JWT的功能，和各种开发语言生成JWT的解决方案。我生成JWT就是在这里找到的方案，我使用的是jsrsasign github地址

开始生成JWT

   jsrsasign官方案例地址 官网案例地址有一个小坑，导致我和服务器生成的结果不一样。

首先引入jsrsasign

  <script language="JavaScript" type="text/javascript"
          src="https://kjur.github.io/jsrsasign/jsrsasign-latest-all-min.js">
  </script>

第二步声明header

  var header = {
    'typ': 'JWT', // 声明类型
    'alg': 'HS256' // 声明加密的算法 通常直接使用 HMAC SHA256
  }

第三步声明载体

   载体我使用的JWT官网案例，这里需要根据实际业务场景改变。

  var payload = {
    "sub": "1234567890",
    "name": "John Doe",
    "iat": 1516239022
  }

第四步生成JWT

   注意这一步和官网案例不同，secret是一个对象，并且里面只一个"utf8"的key，utf8对应的值就是和服务器约定的秘钥。 我就是卡在了这一步，但是官网在最下方给出了这个案例，当时没看见。

    var sHeader = JSON.stringify(header);
    var sPayload = JSON.stringify(payload);
    var sJWT = KJUR.jws.JWS.sign("HS256", sHeader, sPayload, {utf8: "secret"});

验证JWT

   jsrsasign官网案例地址 验证JWT就比较简单了，输入生成的JWT,还有秘钥，和加密的算法，就可以得到一个Boolean类型的返回值。

    var isValid = KJUR.jws.JWS.verifyJWT(sJWT, { utf8: "secret" }, { alg: ['HS256'] });

结尾

   好久没有写文章了，写的不好的地方请多多指教，谢谢。