JWT 简介

什么是 JWT

全称 JSON Web Token， 是目前最风行的跨域认证解决方案。根本的实现是服务端认证后，生成一个 JSON 对象，发回给用户。用户与服务端通信的时候，都要发回这个 JSON 对象。

该 JSON 相似如下：

{  "姓名": "张三",  "角色": "管理员",  "到期工夫": "2018年7月1日0点0分"}

为什么须要 JWT

先看下个别的认证流程，基于 session_id 和 Cookie 实现

1、用户向服务器发送用户名和明码。
2、服务器验证通过后，在以后对话（session）外面保留相干数据，比方用户角色、登录工夫等等。
3、服务器向用户返回一个 session_id，写入用户的 Cookie。
4、用户随后的每一次申请，都会通过 Cookie，将 session_id 传回服务器。
5、服务器收到 session_id，找到后期保留的数据，由此得悉用户的身份。

然而这里有一个大的问题，如果是服务器集群，则要求 session 数据共享，每台服务器都可能读取 session。这个实现老本是比拟大的。

而 JWT 转换了思路，将 JSON 数据返回给前端的，前端再次申请时候将数据发送到后端，后端进行验证。也就是服务器是无状态的，所以更加容易拓展。

JWT 的数据结构

JWT 的三个局部顺次如下:

  • Header（头部），相似如下
{  "alg": "HS256",  "typ": "JWT"}

alg 属性示意签名的算法（algorithm），默认是 HMAC SHA256（写成 HS256）。typ 属性示意这个令牌（token）的类型（type），JWT 令牌对立写为 JWT

  • Payload（负载）。也是一个 JSON，用来寄存理论须要传递的数据。JWT 规定了 7 个官网字段。如下所示
iss (issuer)：签发人
exp (expiration time)：过期工夫
sub (subject)：主题
aud (audience)：受众
nbf (Not Before)：失效工夫
iat (Issued At)：签发工夫
jti (JWT ID)：编号

当然也能够自定义公有字段。然而要留神，JWT 默认是不加密的，任何人都能够读到，所以不要把机密信息放在这个局部。

  • Signature（签名）。Signature 局部是对前两局部的签名，避免数据篡改。首先，须要指定一个密钥（secret）。这个密钥只有服务器才晓得，不能泄露给用户。而后，应用 Header 外面指定的签名算法（默认是 HMAC SHA256），依照上面的公式产生签名。
HMACSHA256(  base64UrlEncode(header) + "." +  base64UrlEncode(payload),  secret)

算出签名当前，把 Header、Payload、Signature 三个局部拼成一个字符串，每个局部之间用"点"（.）分隔，就能够返回给用户。如下所示

JWT 的平安

  • JWT 默认是不加密，但也是能够加密的。JWT 不加密的状况下，不能将机密数据写入 JWT
  • JWT 自身蕴含了认证信息，一旦泄露，任何人都能够取得该令牌的所有权限。为了缩小盗用，JWT 的有效期应该设置得比拟短。对于一些比拟重要的权限，应用时应该再次对用户进行认证
  • 为了缩小盗用，JWT 不应该应用 HTTP 协定明码传输，要应用 HTTPS 协定传输

Node 简略demo—— Koa JWT 的实现

说完理论知识，咱们来看下如何实现 JWT，大抵的流程如下：

首先，用户登录后服务端依据用户信息生成并返回 token 给到客户端，前端在下次申请中把 token 带给服务器，服务器验证无效后，返回数据。有效的话，返回 401 状态码

这里咱们用 Node 实现，次要用到的两个库有

  • jsonwebtoken，能够生成 token，校验等
  • koa-jwt 中间件 对 jsonwebtoken 进一步的封装，次要用来校验 token

疾速搭建一个 koa 我的项目

发现官网目前没有一个疾速搭建 koa 我的项目的形式，像 Vue-cli 一样。（可能是搭建一个 koa 我的项目老本也很低）。但懒人的我，还是找到了一个工具 —— koa-generator，应用也绝对简略，如下

  • 装置
npm install -g koa-generator
  • koa2 my-project 新建一个叫做 my-project 的koa2 我的项目
  • cd my-project 和 npm install
  • 启动我的项目 npm start
  • 关上 localhost:3000

生成 Token

为了演示不便，我这里间接定义了变量 userList 存储用户的信息，实在应该是寄存在数据库中的。

const crypto = require("crypto"),  jwt = require("jsonwebtoken");// TODO:应用数据库// 这里应该是用数据库存储，这里只是演示用let userList = [];class UserController {  // 用户登录  static async login(ctx) {    const data = ctx.request.body;    if (!data.name || !data.password) {      return ctx.body = {        code: "000002",         message: "参数不非法"      }    }    const result = userList.find(item => item.name === data.name && item.password === crypto.createHash('md5').update(data.password).digest('hex'))    if (result) {      const token = jwt.sign(        {          name: result.name        },        "Gopal_token", // secret        { expiresIn: 60 * 60 } // 60 * 60 s      );      return ctx.body = {        code: "0",        message: "登录胜利",        data: {          token        }      };    } else {      return ctx.body = {        code: "000002",        message: "用户名或明码谬误"      };    }  }}module.exports = UserController;

通过 jsonwebtoken 的 sign 办法生成一个 token。该办法第一个参数指的是 Payload（负载），用于编码后存储在 token 中的数据，也是校验 token 后能够拿到的数据。第二个是秘钥，服务端特有，留神校验的时候要雷同能力解码，而且是窃密的，一般而言，最好是定公共的变量，这里只是演示不便，间接写死。第三个参数是 option，能够定义 token 过期工夫

客户端获取 token

前端登录获取到 token 后能够存储到 cookie 中也能够寄存在 localStorage 中。这里我间接存到了 localStorage 中

login() {  this.$axios    .post("/api/login", {      ...this.ruleForm,    })    .then(res => {      if (res.code === "0") {        this.$message.success('登录胜利');        localStorage.setItem("token", res.data.token);        this.$router.push("/");      } else {        this.$message(res.message);      }    });}

封装 axios 的拦截器，每次申请的时候把 token 带在申请头发送给服务器进行验证。这里如果之前放在 Cookie 中，能够让它主动发送，然而这样不能跨域。所以举荐做法是放在 HTTP 申请头 Authorization 中，留神这里的 Authorization 的设置，后面要加上 Bearer 。详情能够见 Bearer Authentication

// axios 申请拦截器解决申请数据axios.interceptors.request.use(config => {  const token = localStorage.getItem('token');  config.headers.common['Authorization'] = 'Bearer ' + token; // 注意这里的 Authorization  return config;})

校验 token

应用 koa-jwt 中间件进行验证，形式比较简单，如下所示

// 错误处理app.use((ctx, next) => {  return next().catch((err) => {      if(err.status === 401){          ctx.status = 401;        ctx.body = 'Protected resource, use Authorization header to get access\n';      }else{          throw err;      }  })})// 留神：放在路由后面app.use(koajwt({  secret: 'Gopal_token'}).unless({ // 配置白名单  path: [/\/api\/register/, /\/api\/login/]}))// routesapp.use(index.routes(), index.allowedMethods())app.use(users.routes(), users.allowedMethods())

须要留神的是以下几点：

  • secret 必须和 sign 时候保持一致
  • 能够通过 unless 配置接口白名单，也就是哪些 URL 能够不必通过校验，像登陆/注册都能够不必校验
  • 校验的中间件须要放在须要校验的路由后面，无奈对后面的 URL 进行校验

演示

  • 如果间接拜访须要登录的接口，则会 401

  • 先注册，后登录，不然会提醒用户名或者明码谬误

  • 登录后带上 Authorization，能够失常拜访，返回 200 以及正确的数据

总结

本文总结了对于 JWT 鉴权相干的常识，并提供了一个 koa2 实现的简略 demo，心愿对大家有所帮忙。

受制于篇幅，有机会独自说下 koa-jwt 的源码，也绝对比较简单~

本文 demo 地址: Client 和 Server

参考

  • JSON Web Token 入门教程
  • Node.js 利用：Koa2 应用 JWT 进行鉴权