javascript - วิธีการใช้การตรวจสอบความถูกต้องใน NestJs กับการแสดงผล HTML?

NestJS ใช้การตรวจสอบด้วยท่อการตรวจสอบและ

@UsePipes(ValidationPipe)

ถ้านี่ล้มเหลว มันจะโยนข้อยกเว้น ซึ่งสิ่งนี้ใช้ได้กับ REST APIs ที่ส่งคืน JSON

จะตรวจสอบความถูกต้องของพารามิเตอร์เมื่อใช้การแสดงผล HTML และการคืนค่าอย่างไร

{ errors: ['First error'] }

ไปยังแม่แบบ hbs?

คำตอบ #1

คุณสามารถสร้าง Interceptor ที่เปลี่ยนข้อผิดพลาดการตรวจสอบให้เป็นการตอบกลับข้อผิดพลาด:

@Injectable()
export class ErrorsInterceptor implements NestInterceptor {
  intercept(
    context: ExecutionContext,
    call$: Observable<any>,
  ): Observable<any> {
    return call$.pipe(
        // Here you can map (or rethrow) errors
        catchError(err => ({errors: [err.message]}),
      ),
    );
  }
}

คุณสามารถใช้มันได้โดยการเพิ่ม @UseInterceptors(ErrorsInterceptor) ในตัวควบคุมของคุณหรือในเมธอดของมัน

คำตอบ #2

ฉันแทบจะบ้าไปแล้วพยายามหาวิธีแบบ "เหมือน Nest" ในการทำสิ่งนี้พร้อมกับยังคงรักษาระดับการปรับแต่งได้ และฉันคิดว่าสุดท้ายฉันก็เจอมันแล้ว ก่อนอื่น เราต้องการข้อผิดพลาดที่มีการอ้างอิงถึงข้อผิดพลาด class-validator ที่มีอยู่ ดังนั้นเราจึงสร้างคลาสข้อผิดพลาดแบบกำหนดเองดังนี้:

import { ValidationError } from 'class-validator';

export class ValidationFailedError extends Error {
  validationErrors: ValidationError[];
  target: any;

  constructor(validationErrors) {
    super();
    this.validationErrors = validationErrors;
    this.target = validationErrors[0].target
  }
}

(เรายังมีการอ้างอิงถึงคลาสที่เราพยายามตรวจสอบความถูกต้อง ดังนั้นเราจึงสามารถส่งกลับอ็อบเจ็กต์ของเราได้ตามความเหมาะสม)

จากนั้น ใน main.ts เราสามารถตั้งค่าโรงงานข้อยกเว้นแบบกำหนดเองได้ดังนี้:

  app.useGlobalPipes(
    new ValidationPipe({
      exceptionFactory: (validationErrors: ValidationError[] = []) => {
        return new ValidationFailedError(validationErrors);
      },
    }),
  );

ต่อไป เราจะสร้าง ExceptionFilter เพื่อจับข้อผิดพลาดที่กำหนดเองของเรา ดังนี้:

@Catch(ValidationFailedError)
export class ValidationExceptionFilter implements ExceptionFilter {
  view: string
  objectName: string

  constructor(view: string, objectName: string) {
    this.view = view;
    this.objectName = objectName;
  }

  async catch(exception: ValidationFailedError, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const response = ctx.getResponse<Response>();
    const request = ctx.getRequest<Request>();

    response.render(this.view, {
      errors: exception.validationErrors,
      [this.objectName]: exception.target,
      url: request.url,
    });
  }
}

เรายังเพิ่มตัวเริ่มต้นด้วย ดังนั้นเราสามารถระบุได้ว่าจะแสดงมุมมองใดและชื่อของวัตถุคืออะไร เพื่อที่เราจะได้ตั้งค่าตัวกรองของเราบนเมธอดคอนโทรลเลอร์ได้ดังนี้:

  @Post(':postID')
  @UseFilters(new ValidationExceptionFilter('blog-posts/edit', 'blogPost'))
  @Redirect('/blog-posts', 301)
  async update(
    @Param('id') postID: string,
    @Body() editBlogPostDto: EditBlogPostDto,
  ) {
    await this.blogPostsService.update(postID, editBlogPostDto);
  }

หวังว่าสิ่งนี้จะช่วยบางคนได้นะ เพราะฉันชอบ NestJS แต่ดูเหมือนว่าคู่มือและบทเรียนจะถูกตั้งขึ้นสำหรับ JSON APIs มากกว่าสำหรับแอป CRUD แบบเต็มรูปแบบแบบดั้งเดิม