JWT 인증을 직접 구현해보자

jhj46456·2020년 6월 24일
0

Mo-Gak-Ko

목록 보기
17/18

Before

현재 내 모각코 백엔드의 JWT 인증은 Passport 패키지로 구성되어있다.

Refactoring

먼저 고려해야할 부분이 있다.

  1. token을 어떻게 가져오는가?

    options의 jwtFromRequest에 해당

  2. token의 식별은 어떻게 하는가?

    verifyUser에 해당

headers

먼저, req.headers를 분석해보면 authorization을 볼 수 있습니다.

그렇다면 token만 추출을 해봅니다.

Request의 header에서 token을 추출하였습니다.

jsonwebtoken

지금 이 tokenjsonwebtoken이라는 패키지로 발급된 것입니다.

그렇다면 이 패키지로 복호화를 해줘야겠지요?

📌 https://www.npmjs.com/package/jsonwebtoken#jwtverifytoken-secretorpublickey-options-callbackverify 관련 내용이 있음.

jwt.verify를 실행해보면 다음의 결과가 나옵니다

id가 추출되었으니 이제 DB조회를 할 수 있습니다.

user-data

이제 id로 DB에 있는 user를 찾기 위해 여러분이 구축해놓은 방식으로 준비합니다.
필자는 Prisma2를 사용하였습니다.

실행하면 DB에서 조회되어진 data가 보입니다.

req.user

JWT를 분석하여 나온 id로 DB 조회를 하였을 때
user가 존재하면 Express > Request.User에 user를 넣어줘야 합니다.
(그래야 GraphQL Resolver에서 권한 확인 등 다양한 작업을 할 수 있음)


다음 핸들러로 넘어가도 req.user에 user가 남아있는 것을 볼 수 있습니다.

custom type

@types/passport~ 와 passport~를 삭제하면 다음과 같은 에러가 생깁니다.

Request에 user라는 property가 존재하지 않습니다.

그렇다면 passport를 삭제하면서 Request.User가 사라진 것 같습니다.

기존에 passport를 사용할 때 Requset.User가 생기는 과정은 다음과 같습니다.

express 자체의 Request에는 User가 없습니다.

@types/passport를 설치하면서 Request에 user를 덮어쓰기 합니다.

그렇다면 passport를 삭제하면서 사라진 user를 되찾아야 합니다.

passport가 User를 덮어쓰기 한 것처럼 Custom Type을 줄 수 있습니다.

tsconfig.json에서 typeRoots를 수정합니다.

기본적으로 Typescript는 node_modules/@types directory에서 타입을 읽는데,
주석이 풀리게 되면 기본 값인 "./node_modules/@types" 이 사라지므로
"./node_modules/@types" 을 첫번 째로 적어주고, 두번 째로 customType directory를 적어줍니다.

customType directory에 파일명은 자유롭게 .d.ts 확장자를 붙여 파일을 생성합니다.
d.ts 파일의 규칙으로는 import 구문이 꼭 한 줄 이상 있어야 하고
declare > namespace > interface > property 순서로 작성합니다.

After

Passport일 때와 직접 제작한 JWT 인증 코드를 비교해보겠습니다.

Passport

Custom

둘 중 어느 것이 더 좋아보이시나요?

저는 직접 제작한 쪽이 더 마음에 듭니다.

왜냐하면 Typescript로 passport와 passport-jwt를 설치하면 @types까지 설치하기 때문에
모듈 의존성을 4개나 줄일 수 있거든요.

게다가 어차피 토큰 발급을 위해 설치한 jsonwebtoken에서 복호화를 지원하니 안쓸 수가 없습니다.

profile
리액뚜

0개의 댓글