개발 중인 사이트에서 로그인 여부에 따라 기능 이용의 가능 불가능을 나누기 위해 개발 중에 공부하게 된 내용을 정리해보려고 한다.
아래는 참고한 블로그.
백엔드 팀원이 Acess토큰과 Refresh토큰에 대해서 간단하게 설명해줬는데 프론트에서 토큰을 어떻게 관리할지에 대해서 생각하다가 정리하게 되었다
우리 사이트에서 인증 순서는 아래와 같다.
1. 유저가 아이디 비밀번호를 입력해서 서버에 Request를 보낸다.
2. 아이디 비밀번호가 맞았을 때, 서버측에서 클라이언트 쪽으로 Respose를 통해서 Acess토큰과 Refresh토큰을 동시에 보낸다.
3. Acess토큰의 만료시간은 1시간, Refesh토큰의 만료 기간은 24시간으로 정한다.
이때, 만료 설정은 백엔드에서 토큰을 만들때, 쿠키에서의 만료시간으로 설정한다.
4. 먼저 Acess토큰을 사용하는 경우
1) 로그인이 필요한 기능을 실행하기 전에, axios를 통해서 acess토큰이 있는지 확인하고, 있으면 서버로 보낸다.
2) 서버에서는 acess토큰을 검사한다.
3) acess코드가 정상이면 바로 요청 기능에 맞는 response를 보낸다.
4) aceess코드가 없거나, 비정상이면 response로 acess토큰 이상하다고 보낸다.
5) 클라이언트측에서 이상하다고 응답을 받으면 refresh 토큰이 있는지 확인하고, 있으면 서버한테 보낸다.
6) 서버에서 refresh토큰을 검사해서 맞으면 acess토큰을 반환한다. 아니면 아니다라고 response를 받으면 로그아웃을 시킨다.
7) 다시 새로운 acess 토큰을 받았으면, 동시에 기존 api를 실행한다.
5. 저장장소
Acess 토큰 : private 변수 - react라서 화면 새로고침이 없음. 새로고침할때마다 acess토큰 받는 함수 만들어야되긴함. -> 이게 가장 좋지만 Session Storage에 넣어주는 방식으로 타협
Refresh 토큰: cookie에 저장
6. Acess토큰 자동 갱신?
인증이 필요한 기능을 이용할때(4번 기능 쓸때) acess토큰이 10분 이내로 남으면,
4-6) 기능으로 refresh 토큰을 검사하고 acess토큰을 받아오는 방식을 사용해서 자동 갱신을 해준다.
[용어 정리]
1. JWT란?
Json Web Token 으로 Json형태로 사용자의 속성을 저장하는 web token이다. 여기서는 토큰 자체가 사용자 정보를 담고 있는 Claim 방식이다.
2. 헤더에 담아서 보낸다란?
Request에서 요청하는 데이터 형식에는 header, body, cookies, params(URL값) 등등의 값을 요구한다.
Respond는 이 형식의 데이터에 값을 담은 집합을 말한다.
백엔드에서 이를 axios를 통해 프론트로 넘겨주는 것이다.
3. Session이란?
세션은 웹 사이트의 여러 페이지에 걸쳐 사용되는 사용자 정보를 저장하는 방법을 의미한다.
쿠키는 클라이언트 측에 모든 데이터를 저장하지만,
Session은 서비스가 돌아가는 서버측에 데이터를 저장하고, Session의 key 값만을 클라이언트측에 남겨둔다.
보안이 좋지만 서버에 부담이 된다는 단점이 있다.
'웹 개발 > Back-end' 카테고리의 다른 글
| 검색 기능 구현하기 -1- (0) | 2023.11.10 |
|---|---|
| Intelli J 사용법 정리 (0) | 2021.12.29 |
