javascript - 使用 Joi 验证请求时如何避免 Hapi.js 发送 400 错误

Question

Hapi.js Validation with Joi + failAction 问题。

情况

我们想构建一个“传统”服务器端-仅使用 Hapi 呈现应用程序。

我正在尝试理解如何避免返回“raw”400Joi 验证失败时给客户端的错误:

我们要拦截这个“email not allowed to be empty”validation error，并在html模板中显示给客户端，而不是简单地返回 400 错误。

@AdriVanHoudt建议我们应该:

"Look at failAction under http://hapijs.com/api#route-options "

因此我们将 failAction: 'log' 添加到 /register 路由处理程序中:

{
  method: '*',
  path: '/register',
  config: {
    validate: {
      payload : register_fields,
      failAction: 'log'
    }
  },
  handler: register_handler
}

查看代码: server.js

register_handler 是:

function register_handler(request, reply, source, error) {
  console.log(request.payload);
  console.log(' - - - - - - - - - - - - - - - - - - - - -');
  console.log(source)
  console.log(' - - - - - - - - - - - - - - - - - - - - -');
  console.log(error)
  return reply('welcome!');
}

我期待在终端/控制台中看到一个错误但是当我尝试 console.log handler 时:

- - - - - - - - - - - - - - - - - - - - -
undefined
- - - - - - - - - - - - - - - - - - - - -
undefined

我在 GitHub 上问了这个问题:https://github.com/hapijs/joi/issues/725但还没有得到一个好的例子的答案。如果您有时间提供帮助，请提供完整代码:https://github.com/nelsonic/hapi-validation-question

Answer 1

有两个简单的解决方案:

1。使用 server.ext('onPreResponse' ...

正如@Clarkie 所指出的，在您的 Hapi 应用程序中捕获所有错误的通用方法是使用'onPreResponse'。

我们写了一个 Hapi 插件来做这件事:https://www.npmjs.com/package/hapi-error

像往常一样:

并让您通过 3 个简单的步骤定义自己的自定义错误页面。

1。安装plugin来自 npm:

npm install hapi-error --save

2。将插件包含在你的 Hapi 项目中

在您注册您的服务器时包含插件:

See: /example/server_example.js for simple example

3。确保您有一个名为 error_template

的 View

Note: hapi-error plugin expects you are using Vision (the standard view rendering library for Hapi apps) which allows you to use Handlebars, Jade, React, etc. for your templates.

您的 error_template.html(或 error_template.ext error_template.jsx)应该使用 3它将被传递的变量:

• errorTitle - Hapi 生成的错误磁贴
• statusCode - *HTTP statusCode 发送到客户端例如:404(未找到)
• errorMessage - 人性化的错误消息

for an example see: /example/error_template.html

就是这样!

2。使用 failAction

我们添加了 failAction，它重新使用 register_handler以便 registration-form.html 显示任何输入验证错误消息(直到提交有效数据)

{
  method: '*',
  path: '/register',
  config: {
    validate: {
      payload : register_fields,
      failAction: register_handler // register_handler is dual-purpose (see below!)
    }
  },
  handler: register_handler
}

register_handler 是:

function register_handler(request, reply, source, error) {
  // show the registration form until its submitted correctly
  if(!request.payload || request.payload && error) {
    var errors, values; // return empty if not set.
    if(error && error.data) { // means the handler is dual-purpose
      errors = extract_validation_error(error); // the error field + message
      values = return_form_input_values(error); // avoid wiping form data
    }
    return reply.view('registration-form', {
      title  : 'Please Register ' + request.server.version,
      error  : errors, // error object used in html template
      values : values  // (escaped) values displayed in form inputs
    }).code(error ? 400 : 200); // HTTP status code depending on error
  }
  else { // once successful, show welcome message!
    return reply.view('welcome-message', {
      name   : validator.escape(request.payload.name),
      email  : validator.escape(request.payload.email)
    })
  }
}

See: server.js:57 for complete file.

其中 extract_validation_error(error) 和 return_form_input_values(error)是在 server.js 中定义的辅助函数(但会被拆分成可重复使用的 View 辅助函数)，这使我们的处理函数保持精简。

当我们提交没有任何必填字段的表单时，我们会看到:

我们还使用 https://github.com/chriso/validator.js减轻Cross Site Scripting漏洞:

并在成功注册时显示欢迎信息:

结论

我们觉得重新使用处理函数作为 failAction将与此路线/操作相关的代码保存在一个地方而 server.ext('onPreResponse' ...(虽然适合初始检查)将引入“hooks”这可能会造成混淆(一旦一个应用程序有很多这样的钩子(Hook)...)

#YMMV

让我们知道您的想法!