[React/AXIOS] localStorage를 이용해서 token 저장해 로그인 구현하기

📖 서두

로그인 기능을 구현하려던 와중 회원가입 → 로그인을 하면 계속 로그인 상태를 유지하고 만약 token 값을 가지고 있지 않다면 다른 기능을 사용하지 못하도록 설정을 해야했다. 한 번 로그인을 했다면 계속 유지를 시켜야하므로(즉 로그인을 했다는 정보를 가지고 있어야 한다.) localStorage를 이용해서 로그인 정보를 유지할 수 있도록 token값을 저장해줘야 했다.

 

📝 localStorage

localStorage는 자바스크립트의 Web Storage를 이용한 것이다. 웹 스토리지에는 localStorage와 sessionStorage 2종류가 있다.

두 가지의 차이점을 간단히 설명하자면, 데이터 저장이 어떤 범위로 계속 보존되어 있는지에 달려있다.

localStorage는 어떤 세션에 들어와 있어 그것이 끝나더라도 데이터가 지워지지 않고 보존되어 있다. 이것은 같은 페이지에 대해 여러 페이지가 탭으로 열려 사용해도 데이터가 지워지지 않고 localStorage의 내용이 삭제되지 않는다는 것이다.

sessionStorage는 각 탭들이 별개의 데이터를 저장하며 탭 또는 창이 닫힐 때마다 데이터가 소멸하게 된다. 

 

결과적으로 내 브라우저에서 데이터를 계속 보존시켜 사용하고 싶다면 localStorage를 쓰고 여러 페이지마다 다른 데이터를 보존시키고 싶다면 sessionStorage를 사용하면 된다. 이때 localStorage에서 저장(유지)되는 데이터는 내 컴퓨터, 내 브라우저에서만 저장되어 있어서 다른 컴퓨터에는 데이터가 저장되어있지 않다. 

 

📝 사용법

// 데이터 저장
localStorage.setItem("key", value);

// 데이터 읽기
localStorage.getItem("key");

// 데이터 삭제
localStorage.removeItem("key");

// 모든 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;

우리는 token 값을 전달받아 그것을 setItem을 통해 value에 저장할 수 있겠다. 

 

개발자도구에 들어가서 애플리케이션을 들어가면 로컬 스토리지를 확인할 수 있다. 

현재는 아무런 작업도 하지 않아서 비어있는 것을 볼 수 있다. 이제 여기다가 로그인을 했을 때 토큰을 저장하는 작업을 해보려고 한다.

 

나는 로그인 버튼을 눌렀을 때 발생하는 이벤트를 axios를 사용했다. axios를 통해서 요청을 서버에 보내고 응답을 받아야한다. 

그때 응답으로 받은 정보를 localStorage에 저장하면 된다.

 

구현 코드

axios를 연결하고 token에 응답받았을 때의 access_token을 변수로 저장해준다.

이렇게 access_token으로 저장해준 이유는 내가 로그인을 했을 때 응답받은 코드를 살펴봤을 때 밑과 같이 콘솔에 찍히게 된다.

이때 응답결과(res)의 data.access_token을 변수에 저장해준 것이다.

 

 

이 토큰을 localStorage에 저장해야하므로 setItem을 통해서 이 정보를 저장해준다.

 

그러면 이런식으로 토큰이 잘 저장되어있는 것을 볼 수 있다. 

 

그리고 로그인을 했으니 todoList 페이지로 바로 이동을 시켜보자.

이때 나는 window.location.replace()를 사용했다.

이걸 사용한 이유는 URL이 깨끗하게 교체되기 때문이다. location.replace는 히스토리 안에 저장이 안된다.

이 말은 유저가 back(뒤로가기) 버튼을 눌러도 이전 페이지가 나오지 않는다. 따라서 로그인을 했으므로 다시 뒤로가서 로그인을 하지 않도록 하기 위해 사용했다.

 

이렇게까지하면 로그인 후 바로 투두리스트 페이지로 넘어가게 된다!

 

결과