用过Koa的码农都知道,在Koa中获取POST提交的数据需要配置第三方的中间件,而Egg继承于Koa,在这一方面做了优化,获取POST提交的数据不需要再配置其它的中间件了,并添加了安全机制 CSRF 的防范,在Egg中获取用户提交的POST数据主要有以下两种方法。
第一种:在用户访问需要POST提交数据的页面时,返回CSRF密钥,当用户提交数据时,将CSRF密钥一起返回,以下是具体的实现。
1. 在router.js中配置路由;
'use strict';
module.exports = app => {const { router, controller } = app;router.get('/', controller.home.index);router.post('/add', controller.home.add);
};
2. 在config文件夹下的config.default.js 中配置模板引擎;
'use strict';
module.exports = appInfo => {const config = exports = {};// use for cookie sign key, should change to your own and keep securityconfig.keys = appInfo.name + '_1532511512428_3477';// add your config hereconfig.middleware = [];// 配置模板引擎config.view = {mapping: {'.html': 'ejs',},};return config;
};
3. 在controller中定义控制器文件home.js,并添加控制器方法;
'use strict';
const Controller = require('egg').Controller;
class HomeController extends Controller {async index() {// this.ctx.csrf 用户访问这个页面的时候生成一个密钥await this.ctx.render('home', {// 将密钥返回用户端,让用户提交后返回csrf: this.ctx.csrf});}// 接收post提交的数据async add() {console.log(this.ctx.request.body);}
}module.exports = HomeController;
4. 在view中定义模板文件home.html,并在表单地址中绑定服务端返回的csrf,当用户提交时与其它数据一起回传;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body><!-- 将csrf的值拼接在地址后面,提交时回传 --><form action="/add?_csrf=<%=csrf%>" method="POST">用户名: <input type="text" name="username"/><br><br> 密 码: <input type="password" name="password" type="password"/><br><br><button type="submit">提交</button></form>
</body>
</html>
第二种:在中间件中配置全局的CSRF密钥,在需要提交POST数据的页面添加一个隐藏表单域,当用户提交时,将CSRF密钥一起返回,以下是具体的实现。
1. 在router.js中配置路由;
'use strict';
module.exports = app => {const { router, controller } = app;router.get('/', controller.home.index);router.post('/add', controller.home.add);
};
2. 在config文件夹下的config.default.js 中配置模板引擎与中间件;
'use strict';
module.exports = appInfo => {const config = exports = {};// use for cookie sign key, should change to your own and keep securityconfig.keys = appInfo.name + '_1532511512428_3477';// 配置设置全局csrf的中间件config.middleware = ['auth'];// 配置模板引擎config.view = {mapping: {'.html': 'ejs',},};return config;
};
3. 在controller中定义控制器文件home.js,并添加控制器方法;
'use strict';
const Controller = require('egg').Controller;
class HomeController extends Controller {async index() {// 渲染home.html模板文件await this.ctx.render('home');}// 接收post提交的数据async add() {console.log(this.ctx.request.body);}
}
module.exports = HomeController;
4. 在view中定义模板文件home.html,用隐藏表单域绑定服务端返回的csrf,当用户提交时与其它数据一起回传;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body><form action="/add" method="POST"><!-- 用隐藏表单域绑定全局的csrf --><input type="hidden" name="_csrf" value="<%=csrf%>">用户名: <input type="text" name="username" /><br><br> 密 码: <input type="password" name="password" type="password" /><br><br><button type="submit">提交</button></form>
</body>
</html>
5. 在middleware中定义中间件文件auth.js,配置全局的csrf;
module.exports=(option,app)=>{return async function auth(ctx,next){// 设置模板全局变量ctx.state.csrf=ctx.csrf;await next();}
}