210305_TIL (JWT, 토큰기반인증)

🍎 오늘 배운 것

JWT, 토큰기반인증
Express 서버에서 JWT를 기반으로 회원 인증을 하는 시스템을 구현해봤다. 쿠키, 세션에 이어서 또 새로운 개념이라 개념에 대한 정리가 우선되어야할 것 같아서 정리부터했는데 막상 코드로 작성하려니까 다시 뒤죽박죽이 되는 느낌이었다. 정확히 어떤 차이점이 있는지는 좀 더 확실히 해둬야겠다. 일단 서버부분을 먼저 구현했는데, 클라이언트의 로그인 요청이 있다고 가정하고 ID와 비밀번호를 바다 데이터베이스에 존재하는지 확인했다. 존재할 경우, Access Token과 Refresh Token을 모두 생성해서 응답으로 돌려줬다. 이때는 암호화된 상태로 반환해줬다. jsonwebtoken 라이브러리를 사용해서 거의 옵션만 설정해주는 식이었다. AccessToken에 대한 요청이 왔을 때는 토큰을 해석해 원래의 문자열로 돌리고, 유효성을 판단해서 경우에 따라 다른 응답을 돌려주도록 했다. Refresh Token에 대하 요청이 왔을 때는 유효할 때만 새로운 Access Token과 유저가 요청한 정보를 돌려주도록 했다. 서버 구현을 끝내고 클라이언트 부분을 만들었는데, state에서 유저 정보들을 관리하고, 로그인 상태에 따라 다른 화면을 렌더링하도록 했다. 로그인 후에는 Access Token 과 Refresh Token 요청을 보낼 수 있도록 기능을 구현했다.

CSS 복습
flex에 익숙해져서 맨날 flex만 써왔는데 grid에 대해서 제대로 공부해봐야겠다는 생각이 들었다. 물론 flex로도 거의 해결할 수 있기는 하지만, 필요에 따라서 활용할 수도 있을 것 같다.

 

🍎 기억할 것

Web Token 전달과정

1. 클라이언트 : 사용자가 ID, PW를 입력 (POST token)
2. 서버 : DB에서 해당 ID, PW가 일치하는 데이터가 있는지 판별 (있다면 JWT 발행, 없다면 error)
3. 클라이언트 : 전달받은 JWT를 어딘가에 저장 (Cookies, Local Storage, Session Storage..)
4. 클라이언트 : API 요청시 헤더에 JWT 함께 전달
5. 서버 : 유효한 JWT인지 판별 후 Response

 

🍎 더 공부할 것

✔️ Typescript
✔️ OAuth