代码的后面会暴露出 responseHandler 和 errorHandler , responseHandler 正确响应,我们在业务中,只需要对 ctx.result 进行写入即可。这个中间件可以放在所有中间件的最后面,这样可以保证前面中间件都需要经过它,再返回前端。 errorHandler 错误响应,这个主要是用来进行出错或者异常的捕获,可以返回响应给前端,要不前端会出现一直padding的状态直到超时。
jwt.js
'use strict' const koaJwt = require('koa-jwt') const jwt = require('jsonwebtoken') const config = require('../config') const jwtMiddleware = koaJwt({ secret: config.secret }) module.exports = function (ctx, next) { // 将 token 中的数据解密后存到 ctx 中 try { if (typeof ctx.request.headers.authorization === 'string') { const token = ctx.request.headers.authorization.slice(7) ctx.jwtData = jwt.verify(token, config.secret) } else { throw {code: 401, message: 'no authorization'} } } catch (err) { throw {code: 401, message: err.message} } next() }
其实这个中间件是对 koa-jwt 进行封装的,JWT我们用来生成token,用来判断用户的唯一性,每次登录后返回前端,前端每一个需要鉴权的api都需要进行token验证,我们利用了 koa-jwt 进行token的生成,但是怎样才能在每一个接口中获取到token解析后的用户呢。这个中间件就起到很大的关键作用。会结合在需要鉴权的 router 中,验证通过后保存信息到ctx中,可以供全局使用。
cors.js
在前后端接口请求中,由于浏览器的限制,会出现跨域的情况。常用的跨域方案有:
1、JSONP跨域
2、nginx反向代理
3、服务器端修改heade
4、document.domain
5、window.name
6、postMessage
7、后台配置运行跨域
koa中如何设置跨域
先看看koa中如何设置跨域,cors具体的实现过程,具体的详细介绍,已经在代码中进行注释了。先看一下原生的配置,后面直接使用中间件即可,不过还是需要了解一下具体实现方式,万一出了问题,能快熟的排查。
app.use(async (ctx, next) => { // 允许来自所有域名请求 ctx.set("Access-Control-Allow-Origin", "*"); // 这样就能只允许 :8080 这个域名的请求了 // ctx.set("Access-Control-Allow-Origin", "http://localhost:8080"); // 设置所允许的HTTP请求方法 ctx.set("Access-Control-Allow-Methods", "OPTIONS, GET, PUT, POST, DELETE"); // 字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段. ctx.set("Access-Control-Allow-Headers", "x-requested-with, accept, origin, content-type"); // 服务器收到请求以后,检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后,确认允许跨源请求,就可以做出回应。 // Content-Type表示具体请求中的媒体类型信息 ctx.set("Content-Type", "application/json;charset=utf-8"); // 该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。 // 当设置成允许请求携带cookie时,需要保证"Access-Control-Allow-Origin"是服务器有的域名,而不能是"*"; ctx.set("Access-Control-Allow-Credentials", true); // 该字段可选,用来指定本次预检请求的有效期,单位为秒。 // 当请求方法是PUT或DELETE等特殊方法或者Content-Type字段的类型是application/json时,服务器会提前发送一次请求进行验证 // 下面的的设置只本次验证的有效时间,即在该时间段内服务端可以不用进行验证 ctx.set("Access-Control-Max-Age", 300); /* CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段: Cache-Control、 Content-Language、 Content-Type、 Expires、 Last-Modified、 Pragma。 */ // 需要获取其他字段时,使用Access-Control-Expose-Headers, // getResponseHeader('myData')可以返回我们所需的值 //https://www.rails365.net/articles/cors-jin-jie-expose-headers-wu ctx.set("Access-Control-Expose-Headers", "myData"); await next(); })
相对用得较多是的大神封装好得koa-cors中间件,可以自行查看npm上得文档,在这个项目中用的就是koa-cors的中间件,基本的配置写在cors.js里面了,再通过中间件进行引用。注意要写在router前面,避免在没有进行跨域配置前就去请求接口。
app.js中的引用,记得安装引入koa-cors
// cors app.use(cors(corsHandler))