어느덧 데브코스도 막바지 마지막 팀프로젝트를 진행하는데, 한가지 문제점이 생겼다.
지금껏 로그인을 대부분 간편로그인 기능을 이용해와서 깊게 다뤄보지 못해 로그인을 처음부터 상세하게 구현해보면 좋겠다는 생각에 로그인 부분을 맡았는데, 로그인 시 token을 cookie로 받아오는방법을 사용해본적이 없어 로그인 상태관리를 위해 token을 다뤄야하는데 cookie에 접근하는 방법에 어려움이 있었다.
token을 cookie에 받아오면 어떻게 토큰을 읽어와야할까? 이전에 body값으로 받아와 localStorage에 저장하던 방법은 간단했다. localStorage는 단순하게 js를 통해 접근이 가능했기 때문이다. 다만 이러면 보안이 취약하다는 단점이 있었다.
해결책 1. react-cookie 사용 (실패)
구글링을 하다, cookie에 접근하려면 react cookie를 사용하면 된다는 내용을 알게되어 설치하여 사용해 봤지만 http only때문에 js 코드를 통해 쿠키에 접근이 불가능했다.
해결책 2. cookie를 발급 받을때 이메일을 localStorage에 저장후 이를 통한 상태관리
실패는 하지 않았지만, 좋은 방법은 아니였다. 우선 로그인, 로그아웃시 localStorage에 이메일을 저장하면 상태관리가 가능하지만, 만료를 설정하는데 문제가 있고, 좋은 방법도 아닌것 같았기 때문이다.
해결책 3. token이 만료되면 나오는 응답코드를 통한 상태관리
우선 로그인을 하면 cookie에 토큰이 저장이 되므로, localStorage에 이메일을 저장한다. 그 후 토큰이 만료된 상태에서 백엔드에 요청을 하면 401에러가 나는데 이 401에러가 나는 상황에서 로그인 상태를 false로 수정하며 localStorage의 이메일을 삭제해주는 방식을 채용했다. 나쁘지 않은 방식인것 같아 우선은 해당 방법을 사용하기로 했다.
axiosInstance.interceptors.request.use(
(response) => {
return response;
},
(error) => {
if (error.response.status === 401) {
window.location.href = '/login';
localStorage.removeItem('email');
return;
}
return Promise.reject(error);
},
);
쿠키,세션등에 대한 내용을 너무 이론적으로만 알고 있엇는데 실제로 다뤄보니 쉽지않았다. 그래도 문제를 해결하는 방식을 터득하는데 도움이 되었던거 같고 조금이나마 보안을 신경써볼수 있는 좋은 기회였던것 같다.
추가 ) 해결책 4. refreshtoken 이용
쿠키의 만료시간을 길게하고, 토큰의 만료시간을 적게잡는 대신, refreshtoken을 함께 만들어 refreshtoken이 있다면, 로그인 없이 새로 토큰을 발급하는 방식을 채용하였다.
