前端开发那些事儿

【Node】使用 koa2 实现一个简单JWT鉴权

2021-02-26  本文已影响0人  Gopal

JWT 简介

什么是 JWT

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

JSON 类似如下:

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

为什么需要 JWT

先看下一般的认证流程,基于 session_idCookie 实现

但是这里有一个大的问题,假如是服务器集群,则要求 session 数据共享,每台服务器都能够读取 session。这个实现成本是比较大的。

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

JWT 的数据结构

JWT 的三个部分依次如下:

{
  "alg": "HS256",
  "typ": "JWT"
}

alg 属性表示签名的算法(algorithm),默认是 HMAC SHA256(写成 HS256)。typ 属性表示这个令牌(token)的类型(type),JWT 令牌统一写为 JWT

当然也可以自定义私有字段。但是要注意,JWT 默认是不加密的,任何人都可以读到,所以不要把秘密信息放在这个部分。

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

算出签名以后,把 HeaderPayloadSignature 三个部分拼成一个字符串,每个部分之间用"点"(.)分隔,就可以返回给用户。如下所示

image

JWT 的安全

Node 简单demo—— Koa JWT 的实现

说完理论知识,我们来看下如何实现 JWT,大致的流程如下:

image

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

这里我们用 Node 实现,主要用到的两个库有

快速搭建一个 koa 项目

发现官方目前没有一个快速搭建 koa 项目的方式,像 Vue-cli 一样。(可能是搭建一个 koa 项目成本也很低)。但懒人的我,还是找到了一个工具 —— koa-generator,使用也相对简单,如下

npm install -g koa-generator

生成 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;

通过 jsonwebtokensign 方法生成一个 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/]
}))

// routes
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())

需要注意的是以下几点:

演示

image image image

总结

本文总结了关于 JWT 鉴权相关的知识,并提供了一个 koa2 实现的简单 demo,希望对大家有所帮助。

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

本文 demo 地址: ClientServer

参考

上一篇 下一篇

猜你喜欢

热点阅读