koa2，koa-jwt中token验证实战详解

用户身份验证通常有两种方式，一种是基于cookie的认证方式，另一种是基于token的认证方式。当前常见的无疑是基于token的认证方式。以下所提到的koa均为koa2版本。

token认证的优点是无状态机制，在此基础之上，可以实现天然的跨域和前后端分离等。

token认证的缺点是服务器每次都需要对其进行验证，会产生额外的运行压力。此外，无状态的api缺乏对用户流程或异常的控制，为了避免一些例如回放攻击的异常情况，大多会设置较短的过期时间。

准备工作

使用koa-jwt的大致流程是：

1. 用户通过身份验证API(登录)获取当前用户在有效期内的token

2. 需要身份验证的API则都需要携带此前认证过的token发送至服务端

3. koa会利用koa-jwt中间件的默认验证方式进行身份验证，中间件会进行验证成功和验证失败的分流。

koa-jwt中间件的验证方式有三种：

1. 在请求头中设置 authorization为Bearer + token，注意Bearer后有空格。（koa-jwt的默认验证方式）

?

1	{'authorization': "Bearer " + token}

2. 自定义getToken方法

3. 利用Cookie（此cookie非彼cookie）此处的Cookie只作为存储介质发给服务端的区域，校验并不依赖于服务端的session机制，服务端不会进行任何状态的保存。

实战逻辑：

1.在登录路由中进行验证，可携带用户名等必要信息，并将其放至上下文对象中。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

router.post('/login', async (ctx, next) => {     const user = ctx.request.body;     if (user && user.username === 'tate') {         let {username} = user;         const token = sign({username, test: 'testok'}, secret, {expiresIn: '1h'});         ctx.body = {             mssage: 'GET TOKEN SUCCESS',             code: 1,             token         }     } else {         ctx.body = {             message: 'param error',             code: -1         }     } })

2. 客户端登录成功并获取token信息后，将其保存在客户端中。如localstorage。

3. 在访问需要用户登录信息验证的接口是，需要将请求头设置authorization。此处我使用过两种方式：

（1）利用jquery或axios等前端库在对应的钩子中进行拦截设置请求头，此处以jq为例。这种思路有一个比较麻烦的点就是，所有需要验证的接口都需要单独设置请求头。如果用户自己通过url上拼装token进行访问，则不能实现对应效果。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$.ajax({     url: '/userinfo',     type: 'get',     data: {         param1: 'post1',         param2: 'post2',         token: localStorage.getItem('token')     },     beforeSend: function (xhr) {         xhr.setRequestHeader("authorization","Bearer " + localStorage.getItem('token'));     },     success: function (msg) {         console.log(msg);     },     fail: function (err) {         console.log(err);     } })

（2）第二种就是利用koa的中间件在总路由中进行拦截处理。只要存在拼装了token字段的参数，就进行验证。此方法最大的优点就是遍历，但注意的一点是，需要在后端总路由拦截时做好架构，以免对其他路由造成干扰。

?

1 2 3 4 5 6 7

app.use(bodyParser()) app.use(async (ctx, next) => {     console.log(ctx)     let params =Object.assign({}, ctx.request.query, ctx.request.body);     ctx.request.header = {'authorization': "Bearer " + (params.token || '')}     await next(); })

3.利用koa-jwt设置需要验证才能访问的接口，验证成功后可在上下文中的state中获取状态信息。

?

1 2 3 4 5 6 7 8

router.get('/userinfo', jwt, async (ctx, next) => {     ctx.body = {username: ctx.state.user.username}     console.log(ctx) }) .get('/viplist', jwt, async (ctx, next) => {     console.log(ctx.state)     ctx.body = 'check ok' })

以下为核心后端文件的源码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

const koa = require('koa'); const app = new koa(); const bodyParser = require('koa-bodyparser'); const Router = require('koa-router'); const router = new Router(); const views = require('koa-views'); const static = require('koa-static'); const path = require('path');   const { sign } = require('jsonwebtoken'); const secret = 'demo'; const jwt = require('koa-jwt')({secret});   app.use(bodyParser()) app.use(views(__dirname + '/views', {     map: {html: 'ejs'} }))   app.use(static(path.join(__dirname, '/static')))   app.use(async (ctx, next) => {     console.log(ctx)     let params =Object.assign({}, ctx.request.query, ctx.request.body);     ctx.request.header = {'authorization': "Bearer " + (params.token || '')}     await next(); })   router.get('/', async (ctx, next) => {     await ctx.render('index') })   router.post('/login', async (ctx, next) => {     const user = ctx.request.body;     if (user && user.username === 'tate') {         let {username} = user;         const token = sign({username, test: 'testok'}, secret, {expiresIn: '1h'});         ctx.body = {             mssage: 'GET TOKEN SUCCESS',             code: 1,             token         }     } else {         ctx.body = {             message: 'param error',             code: -1         }     } }) .get('/userinfo', jwt, async (ctx, next) => {     ctx.body = {username: ctx.state.user.username}     console.log(ctx) }) .get('/viplist', jwt, async (ctx, next) => {     console.log(ctx.state)     ctx.body = 'check ok' })   router.get('/404', async (ctx, next) => {     await ctx.render('404') })   app     .use(router.routes())     .use(router.allowedMethods()) app.listen(3000, () => {     console.log('server is running at port 3000');     console.log(3) })