关于前端:Node使用-koa2-实现一个简单JWT鉴权

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

该 JSON 相似如下：

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

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

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

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

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

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 不应该应用 HTTP 协定明码传输，要应用 HTTPS 协定传输

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

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

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

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

发现官网目前没有一个疾速搭建 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

为了演示不便，我这里间接定义了变量 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 后能够存储到 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;
})

应用 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/]
}))

// routes
app.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 进行鉴权

关于前端:Node使用-koa2-实现一个简单JWT鉴权

JWT 简介

什么是 JWT

为什么须要 JWT

JWT 的数据结构

JWT 的平安

Node 简略 demo—— Koa JWT 的实现

疾速搭建一个 koa 我的项目

生成 Token

客户端获取 token

校验 token

演示

总结

参考

Just My Socks（注册教程内含优惠码）

关于前端:Node使用-koa2-实现一个简单JWT鉴权

JWT 简介

什么是 JWT

为什么须要 JWT

JWT 的数据结构

JWT 的平安

Node 简略 demo—— Koa JWT 的实现

疾速搭建一个 koa 我的项目

生成 Token

客户端获取 token

校验 token

演示

总结

参考

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）