hapijs 与玉视图引擎显示错误的最佳方式

Question

我想在验证后在我的翡翠视图中显示我的错误消息。

翡翠

    H1 Hello world
#error
  p  #{JSON.stringify(errorMsg)}
div
  form(action="/",method="post")
    div Foo
    div
      input(type="text",name="foo")
    div
      input(type="submit",name="submit")

这是我的服务器代码...

server.register(Vision,(err)=>{
     if(err){console.log(err)}

  server.views({
    engines:{
      jade:Jade
    },
    path: 'views',
    relativeTo: __dirname   });
     server.route([
    {
      method:'GET',path:'/',
        handler:(request,reply)=>{

          reply.view('index');
        }
      },
      {
        method:'POST',path:'/',
          handler: (request,reply) => {
          console.log("POST '/' ");

          const err = {}; // check error and set it
          reply.view('index',{errorMsg:err});
        },
         config:{
      validate:{
        payload: {
            foo: Joi.string().required(),
            submit:Joi.string().required()
        }
      }
    }
      }
     ]); });

server.start((err)=>{
     if(err){console.log(err);}   console.log("server started:"+server.info.uri);

});

目标是验证 foo 的存在

当验证启动时，服务器响应会出现 http 400 错误，这对于 api 来说是完全正常且预期的。这甚至在调用处理函数之前就发生了。

使用视图引擎处理验证错误的最佳方法是什么？

我期待类似的东西（这显然不起作用）

if(request.error){
    reply.view('index',{errorMsg:err});
    }

我还看到了一些处理 onPreResponse 事件以在全球范围内捕获它的答案。他们不是在请求处理程序方法中执行此操作的方法吗？ 或任何最佳实践提示？

Answer 1

文档专门介绍了这种情况。具体见here。

直接取自文档的简短版本如下所示：

const preResponse = function (request, reply) {

    const response = request.response;
    if (!response.isBoom) {
        return reply.continue();
    }

    // Replace error with friendly HTML

      const error = response;
      const ctx = {
          message: (error.output.statusCode === 404 ? 'page not found' : 'something went wrong')
      };

      return reply.view('error', ctx);
};

server.ext('onPreResponse', preResponse);

基本上在preResponse事件上，检查响应是否为繁荣对象。如果没有，请正常回复。如果是一个繁荣对象回复您的错误页面并将一些数据传递给它。

Answer 2

如果您使用 JOI 对象来验证有效负载，您将无法在处理程序中处理它。

如果您注销请求生命周期：

server.route({
  method: 'POST',
  path: '/',
  handler: (req, reply) => {
    reply('hello');
    console.log('handler');
  },
  config: {
    validate: {
      payload: {
        date: Joi.date().required(),
      },
    },
  },
});

server.ext('onRequest', (request, reply) => {
  console.log('onRequest');
  reply.continue();
});

server.ext('onPreAuth', (request, reply) => {
  console.log('onPreAuth');
  reply.continue();
});

server.ext('onPostAuth', (request, reply) => {
  console.log('onPostAuth');
  reply.continue();
});

server.ext('onPreHandler', (request, reply) => {
  console.log('onPreHandler');
  reply.continue();
});

server.ext('onPostHandler', (request, reply) => {
  console.log('onPostHandler');
  reply.continue();
});


server.ext('onPreResponse', (request, reply) => {
  console.log('onPreResponse');
  reply.continue();
});

并尝试一个有效的“日期”参数，你会得到：

onRequest
onPreAuth
onPostAuth
onPreHandler
handler
onPostHandler
onPreResponse

当你尝试一个无效的参数，所以验证失败：

onRequest
onPreAuth
onPostAuth
onPreResponse

正如您所见，处理程序根本没有被调用，因此您无法按照您描述的方式处理它。

如果您不想将路由实现为 API，然后在您的网站上使用它，我建议您从配置中删除 validate 属性并在您的处理程序中使用 Joi.validate()，如下所示：

server.route({
  method: 'POST',
  path: '/',
  handler: (req, reply) => {
    Joi.validate(req.payload, dateSchema, (err, val) => {
      if (err) {
        reply.view('index', { error: err });
      }

      reply('the date is valid');
    });
  },
});

请记住，Joi 正在抛出 error object，所以它不仅仅是文本。