NestJS Custom Decorators만들기

 안녕하세요. 알렉스 입니다. 이번에는 NestJS에서 자주 사용하는 데코레이터를 커스텀으로 만들어 보도록 하겠습니다. 

 제가 백엔드 코드를 짤때 데코레이션을 자주 쓰는데 request의 토큰을 확인해야 할 상황이 있었습니다. 그런데 아무리 찾아봐도 NestJS에서 지원하는 Decorator가 없어서 제가 직접 만들 겸 블로그를 작성하게 되었습니다.

사진1) 흐름도

일단 Client에서 요청이 들어오면 해당 API에 있는 Decorator가 중간에서 Header값에 존재하는 Authorization을 분석합니다. 그리고 해당 토큰이 유효하면 결과를 Controller로 보내고 그렇지 않으면 에러로 응답합니다.

사진1은 일단 로그인 이후에 Client가 토큰을 갖고 있을때의 상황 입니다. 그래서 코드를 미리 작성하고 회원가입을 postman으로 하겠습니다.

사진2) Postman으로 회원가입

이제 Custom Decorators를 만들도록 하겠습니다. 간단하게 nest에서 제공하는 cli로 만들도록 하겠습니다.

 NestJS Cli를 이용하여 Decorator만들기

커스텀 Decorator bolier plate를 생성합니다.

$ nest g d [경로(src에서 시작) 및 파일 이름]

저는 'nest g d /decorators/checkToken'으로 생성 하였습니다.

 

import { SetMetadata } from '@nestjs/common';

export const CheckToken = (...args: string[]) => SetMetadata('check-token', args);

위 코드와 같이 자동 생성된 것을 알수 있습니다. 위의 코드를 

import {

createParamDecorator,

ExecutionContext,

HttpException,

HttpStatus

} from '@nestjs/common';

import { checkToken } from '../function/tokenFun';

export const GetTokenUserId = createParamDecorator(

async (data: unknown, ctx: ExecutionContext) => {

// request요청을 받는다

const request = ctx.switchToHttp().getRequest();

// 토큰을 검증한다.

const token = await checkToken(request.headers['authorization'].split(" ")[1]);

if (!request.headers['authorization']) {

throw new HttpException('토큰이 없습니다.', HttpStatus.NOT_ACCEPTABLE);

} else if (token['error']) {

throw new HttpException(token['message'], token['error']);

}

console.log('token : ', token);

return token;

},

);

이렇게 변경을 해줍니다. 위 코드는 Decorator에서 request를 받고 'authorization'을 검증하는 과정입니다. 'checkToken' 메소드는 제가 따로 만든 함수입니다.

로그인을 진행하고 해당 유저 정보와 토큰이 온것을 알수 있습니다. 이제 토큰을 이용하여 유저 정보를 수정하도록 하겠습니다.

'nickname'을 'alex'에서 'jason'으로 변경하였고 제대로 동작이 되었습니다. 그럼 해당 코드를 확인해 보도록 하겠습니다.

@Patch()

updateUser(

@Body() data: UpdateUserDto,

@GetTokenUserId('token') token: object,

){

return this.service.updateUser(data, token);

}

'@Body'다음에 커스텀 데코레이션 '@GetTokenUserId'를 사용했음을 볼수 있습니다. service의 method인 'updateUser'에 들어가기전 데코레이션에서 'Header'를 분석하고 'Token' 의 문자열은 객체로 변환 시켜서 집어넣습니다.