Egg 中获取 POST 提交的数据

越陌度阡

发布于 2020-11-26 12:50:25

1.6K0

发布于 2020-11-26 12:50:25

用过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 security
    config.keys = appInfo.name + '_1532511512428_3477';
    // add your config here
    config.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 security
    config.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();
    }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/03/24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript