[React] axios 로그인 유저 기능 구현 (feat. 토큰)

시작하며...

프론트엔드에서 React, Axios 를 사용하면서 로그인/회원가입 기능을 구현할 때 서버에서 쿠키로 refresh token 과 access token 을 받아 유저 기능를 하는 방법에 대해 알아볼 것이다.

 

로그인 기능 구현

React 와 axios 로 서버에 로그인 요청을 하는 코드를 작성해서 실행을 하면

로그인 코드

응답으로 서버에서 쿠키로 access token 과 refresh token 를 보내주게 된다.

쿠키

서버에서 전달해준 쿠키를 클라이언트 측에서 저장하기 위해 withCredentials 를 true 로 설정한다.

withCredentials

다시 로그인 요청 후 개발자 도구 → 애플리케이션 탭 → 쿠키 를 확인해보면 서버에서 전달받은 토큰이 쿠키에 제대로 저장되는 것을 확인할 수 있다. 그러면 이제 서버에 요청을 보낼 때도 쿠키에 저장된 토큰도 같이 보내지게 된다.

쿠키

 

withCredentials: true 란?

위에 코드에서 withCredentials: true 로 설정하였다. 그럼 이게 무엇일까?

 

withCredentials: true 란?
서로 다른 도메인(크로스 도메인)에 요청을 보낼 때 브라우저가 쿠키, 인증 헤더 등 포함 여부에 관한 것
true 로 설정할 경우 다른 도메인(크로스 도메인)에 쿠키를 보내거나 받을 수 있음

 

Token 을 body 로 받았을 경우 - 1

만약에 서버에서 Token 을 쿠키가 아닌 body 로 전달해준다면 직접 로컬스토리지에 저장하는 코드를 작성해야 한다.

로컬스토리지

 

Request로 쿠키 보내기

매번 모든 요청에 withCredentials: true 를 붙이는 건 너무 번거로운 작업이다.

 

그래서 axios 의 instace 에 withCredentials: true 속성을 기본값으로 주게 되면 서버에 쿠키를 받거나 보낼 수 있게 된다.

instance

 

그래서 요청 보낸 결과를 보면 요청 헤더에 쿠키가 제대로 들어간 것을 확인할 수 있다.

결과

 

Token 을 body 로 받았을 경우 - 2

서버에서 Token 을 쿠키가 아닌 body 로 전달해준다면 클라이언트에서 서버로 요청을 보낼 때 헤더에 토큰을 보내주게 되는데 이때는 axios 의 interceptors 를 사용하여 access token 을 전달해주면 된다.

헤더

 

Access Token 재발급

access token 은 만료기간이 짧기 때문에 refresh token 을 사용해서 재발급을 받아야 된다.

axios 의 interceptors 를 사용해서 401 에러가 발생했을 때 refresh token 으로 access token 을 재발급 하는 요청을 보내면 된다.

재발급

 

Token 을 body 로 받았을 경우 - 3

refresh token 을 post 요청 body 에 넣어주고 response 로 재발급 받은 token 을 다시 로컬스토리지에 저장하고, 헤더에 새로 발급받은 access token 을 넣어 다시 재요청하면 된다. 

재발급

 

 

마치며...

React 에서 axios 를 사용해서 토큰 기반 인증 하는 법에 대해 알아보았다. 구현된 서버에 따라 동작 방식은 다르겠지만 토큰 기반 인증은 일단 access token 을 통해 api 요청 인증을 해주며, access token 이 만료될 경우 refresh token 을 이용해 다시 access token 을 재발급 받는다. 이런 구현을 직접 해보는 게 먼가 재미있는 것 같다!! ㅎㅎ