JWT 토큰 기능 구현 겨우 했네

코딩 채널

알림 알림 중 알림 취소

구독자 4412명 알림수신 85명 @은월영

프로그래밍 및 코딩 채널

Front-end JWT 토큰 기능 구현 겨우 했네

일하기짱시름

추천 0 비추천 0 댓글 12 조회수 253 작성일 2023-08-20 11:21:25 수정일 2023-08-20 11:27:50

https://arca.live/b/programmer/84249169

리액트 환경에서는 로그인은 세션 대신

JSON WEB TOKEN을 쓰니

세션 대신에 액세스 토큰 / 리프레시 토큰 둘 다 발행하고

컴포넌트 변경때마다 이 토큰 검증을 실행하게 해주는데

이게 넘 복잡하네

이래서 다들 파이어베이스 같은거 쓰는구나 생각함

댓글 [12] 글쓰기

ruby

2023-08-20 13:36:34 답글

리액트로도 세션 쓸 수 있지

펼쳐보기▼

aigo

2023-08-20 23:06:03 답글

그런데 리액트에서 세션을 쓰면 로그인 체크가 불편해지죠.
jwt를 쓰면 유효기간이나 값이 있는지 정도만 체크하면 되지만
세션을 쓰면 각 페이지 라우팅마다 서버로 따로 요청을 보낸다던가 하는 방식으로 해야합니다.

펼쳐보기▼

ruby

2023-08-21 01:16:38 답글

어차피 리액트쿼리 쓰면 서스펜스때문에 컴포넌트마다 요청 따로 하는게 맞고 무엇보다 브라우저 sessionStorage 이용해서 흔히들 사용하는 스토어 라이브러리에 로그인 상태 기본값 넣어주면 크게 불편할 건 없었음
jwt를 쓴다고 해도 이 토큰이 실제로 유효한지는 서버만 알고 있어서(모종의 사유로 서버가 토큰을 파기할 수도 있으니) 결국 둘의 구현상에 큰 불편함의 차이는 없다고 생각함

펼쳐보기▼

ruby

2023-08-21 01:17:47 답글

사실 보안상의 이유로 자주 사용하는 구현 방식인 refresh token이나 서버측에서 토큰을 무효화시키는 기능을 넣다보면 jwt랑 세션 사이에 큰 차이가 없어지기도 하고

펼쳐보기▼

aigo

2023-08-21 01:27:21 답글

*수정됨

보통 세션 스토리지를 세션이라고 부르지는 않습니다.
또한 세션 스토리지는 탭이 켜져있는동안 유지되는 스토리지라서 일반적인 케이스에서는 사용하기 적합하지 않습니다.

그냥 api 리퀘에서 오류 받아서 로그아웃 핸들링 하는건 로그인이 필요하지 않은 페이지에서는 처리가 안되서 좀 불편한 문제가 있죠

펼쳐보기▼

ruby

2023-08-21 01:29:38 답글

그러니까 jwt를 써도 결국 로그인이 된 상태인지는 서버에서 확인받아야 하고, “jwt를 발급받았다“수준의 로그인 체크는 sessionStorage에 ”내가 로그인 된 이력이 있다“와 실용적으로 큰 차이가 없다는 소리임

그리고 jwt 쓴다고 해서 서버에서 돌아오는 401 처리를 안 할 수 있는 것도 아니고

펼쳐보기▼

ruby

2023-08-21 01:31:32 답글

그리고 jwt를 장기 저장하는 용도로 사용하고 싶은거면 서버에서 쿠키 기간 잘 정해주고 localStorage에 표시해두면 같은 효과를 볼 수 있을거고

펼쳐보기▼

ruby

2023-08-21 01:39:08 답글

그러니까 JWT를 사용하든 세션을 사용하든 서로 같은 효과를 보고 싶은거면 큰 불편함 없이 반대쪽 구현을 할 수 있다는 거임

JWT를 단순히 세션 대용으로만 사용한다면, sessionStorage 자체를 세션이라고 부르지는 않지만(클라이언트에서 관리하는 것과 서버에서 관리하는 차이가 분명히 있으니) 일반적으로 구현되는 서버 세션의 scope를 (이것 역시 서버에서 세션을 강제로 파기하지 않는 이상)대체로 따라가기 때문에 세션이 필요한 대부분의 경우에 그대로 사용할 수 있음

JWT를 장기간 사용할 수 있는 토큰으로 사용한다면, 이번에야말로 보안상 이유로 refresh token이나 서버측에서 토큰을 파기하는 방법을 반필수로 구현하게 되는데 그러면 세션도 쿠키 기한 설정과 localStorage에 로그인 여부 저장하는걸로 그 효과를 볼 수 있다는거임 예전에는 JWT도 localStorage도 없었는데 웹사이트에서 로그인 상태 유지 체크박스가 제대로 돌아가던 것만 봐도 이 목적으로 사용하는데 종래의 쿠키가 기능이 부족함이 있는 건 아니라는 사실을 알 수 있음. 다만 1차적으로 로그인이 됐는지 안됐는지 가볍게 체크하기 위해서 localStorage에 플래그 저장만 해두는거고

펼쳐보기▼

일하기짱시름

2023-08-21 03:38:51 답글

*수정됨

나는 쿠키에 둘 다 저장해서 쓰는데 (react-cokie 사용)
액세스는 httpOnly
리프레시는 httpOnly, SameSite:Strict 옵션으로 만들었거든
액세스는 1시간, 리프레시는 1일로 설정해둠

로그인이 성공하면 DB에는 접속기록으로
1. ID
2. 액세스 토큰
3. 리프레시 토큰
4. 로그인 성공날짜
5. 리프레시 토큰 만료시간
6. 접속 IP
로 저장하고

액세스는 검증절차를 거치고
만약 약세스가 만료라면 리프레시랑 유저아이디, 액세스 토큰을 DB에서 검색하고
만약 검증이 성공하면 리프레시 시간을 재갱신하는 식으로 해뒀는데
어떠려나?

토큰 내용은
id
유저닉네임
유저 계층
만료시간
을 담아서 보내는 식

펼쳐보기▼

ruby

2023-08-21 08:36:32 답글

내 생각에는 refresh의 유효기간을 좀 더 길게 잡는 대신 유효기간을 갱신하지 않는게 좋은 것 같음

대신에 refresh token으로 access token 발급 요청이 들어올 때 유효기간을 체크해서 refresh가 곧 만료될 것 같으면 그때 새로 refresh도 같이 발급해서 주는게 괜찮아 보임

펼쳐보기▼

심호흡

2023-08-21 02:56:07 답글

*수정됨

저거 계속 존맛탱 토큰으로 읽히는데 해결법좀

펼쳐보기▼

게임보이어드밴스

2023-08-21 07:29:03 답글

사실 나도 그럼

펼쳐보기▼

댓글 작성

업로드 중

0초

녹음 중지 삭제

글쓰기

전체글 개념글

최근 최근 방문 채널

최근 방문 채널

전체 공지 정보 질문 잡담 유머 C/C++ C# Python Java Front-end Back-end 앱·겜 AI·Data 그 외

번호 제목

작성자 작성일 조회수 추천

비주얼 리팩터링 기능 왜이렇게 자주 망가짐;;

정규식 2023.08.21 71 0

js 베이스 없이 ts 해도 되나요? [17]

Zeya 2023.08.21 279 0

집에서 쓸 컴퓨터용 의자를 찾고 있는데 감이 안잡히네영 [5]

입숨로렘 2023.08.21 198 0

ㅈ같은 애드몹 내가이김 [4]

파이썬바보 2023.08.21 184 0

Front-end JWT 토큰 기능 구현 겨우 했네 [12]

일하기짱시름 2023.08.20 253 0

질문 클라우드 컴퓨팅은 어떻게 소프트웨어적으로 구현되나요? [2]

ㅇㅇ 2023.08.20 137 0

셰이더는 뭐 어케 배워야 할지 모르겠네... [4]

정규식 2023.08.19 165 0

AI·Data 학습 시키는데.. 램이나 그래픽 성능도 영향을 주나..? [4]

메가데레크로머 2023.08.19 304 0

잡담 회사 면접을 여러군데 보면서 느낀 건 [2]

나리 2023.08.19 356 3

잡담 맥북 air 15인치 살까 아님 걍 프로 살까 [3]

게임보이어드밴스 2023.08.19 271 1

질문 코딩 초보에겐 리눅스 많이 어려움? [6]

해결사 2023.08.19 311 0

백준 문제풀때, 어떤 기준으로 문제선정함?

ㅇㅇ 2023.08.19 101 0

질문 개발자 관련 질문 [5]

link 2023.08.19 292 2

질문 멀티스레딩이 프로그램의 속도를 올릴 수 있는 이유가 뭐야? [3]

정규식 2023.08.18 219 0

글쓰기

전체글 개념글