토큰 기반 인증

로그인 인증

로그인 시스템을 구현할 때 사용하는 두 가지 인증 방식이 있는데 세션 기반 인증과 토큰 기반 인증이 그것이다

세션 기반 인증

유저가 로그인시에 서버에서 그 정보를 저장하고 유저에게 아이디를 지급해준다

이후 유저가 http 요청시에 발급받은 아이디와 함께 전달하고 이 때 받은 아이디가 최초에 지급해준 아이디와 같은지 확인하고 요청을 수행한다

토큰 기반 인증

유저가 로그인시에 유저에게 토큰을 지급해준다

이후 유저는 http 요청시에 발급받은 토큰을 함께 전달하고 이 때 서버에서 토큰이 유효한지 확인하고 요청을 수행한다

---

차이점

큰 차이점은 서버에서 정보를 가지고 있는가 그렇지 않은가 이다

세션 기반은 서버에 유저의 정보를 가지고 있다가 일치 여부를 확인하지만 토큰 기반은 유저에게 준 토큰이 유효한지만 확인한다

그렇다면 토큰 인증 기반은 어디에 토큰 정보를 저장할까?

토큰 저장 위치

서버가 아니라면 당연히 저장되는 위치는 클라이언트일텐데 그럼 토큰은 어디에 저장될 수 있을까?

쿠키, 세션 저장소, 로컬 저장소 크게 3가지가 있다

쿠키

쿠키는 HTTP통신의 무상태성을 보완해주기 위해 나온 것으로 서버가 클라이언트에 값을 저장하고 읽을 수 있도록해준다

이 특성 덕분에 쿠키는 서버에서도 접근할 수 있고 http 요청시에 자동으로 쿠키가 담겨서 서버에게 전달된다

매우 작은 저장 공간을 가지고 유효 기간을 기준으로

세션 종료시에 삭제되는 session cookies와 유통기한과 같이 만료일에 삭제되는 persistent cookies로 나뉜다

세션 스토리지

세션 스토리지는 말 그대로 세션을 위한 저장 공간으로 세션이 종료되면 모두 삭제된다

쿠키와는 다르게 서버에서 자체적으로 접근할 수 없으므로 http 요청시에 헤더에 담아서 보내주어야한다

const response = await fetch(`${API_ENDPOINT}/api/`,{
  method: 'GET',
  headers: {'Authorized': token}
})

로컬 스토리지

로컬 스토리지는 persistent cookies와 비슷하다 하지만 로컬 스토리지에 저장하게되면 데이터를 거의 반 영구적으로 저장해 둘 수 있다

세션과 마찬가지로 서버에서 자체적으로 접근할 수 없으므로 위와 같이 요청시에 헤더에 토큰을 함께 보내주어야한다

---

어디가 좋을까

보안성을 기준으로 판단이 나뉘는데

쿠키는 http only 옵션으로 보안을 강화해서 xss 공격을 방어할 수 있고

로컬/세션 스토리지는 csrf공격을 방어하기 쉽다