React) Localstorage를 활용하여 React 로그인 정보 유지하기

아래 블로그를 참고하여 데모 사이트에 간단한 로그인 기능을 구현하였습니다.

코드에 static하게 저장되어 있는 사용자의 이메일과 패스워드 정보가 일치하고, 로그인 형식이 올바르면 setUser를 통해 초기값이 null 이던 user 변수에 정보를 주고, 이 user 값이 null이 아니라면 authenticated 값을 true로 바꿔줍니다. authenticated 값이 true로 전달되면 로그인 정보가 필요한 컴포넌트들이 랜더링 될 수 있는 것이죠. 

React Router로 사용자 인증하기 (로그인/로그아웃)

---

LocalStorage 활용하여 인증 정보 저장하기

---

제 데모 사이트의 경우 처음 로그인 페이지를 랜딩 페이지로 두어, 이곳에서 로그인을 하고, authenticated가 true가 되면 router로 구현한 모든 페이지들에 접근이 가능한 상태로 만들고자 했습니다. 

그런데 데모 사이트에서 axios get, delete, post 등을 한 뒤, 새로운 데이터를 랜더링 하기 위해 API 호출 이후 window.locaton.reload() 함수를 호출했는데 그러면 authenticated 값이 새로고침되면서 false로 초기화되어 새로고침을 한 현재 컴포넌트에 접근할 수 없는 상태가 되어 랜딩 페이지인 로그인 페이지로 redirect되는 문제가 발생했습니다.

이 문제를 해결하기 위해 localstorage를 활용했습니다. 

localStorage.setItem("authenticated", authenticated);

<AuthRoute authenticated={localStorage.getItem("authenticated")} path='/example' render={() => <Example />} />

위 블로그에서 AuthRoute 컴포넌트의 자세한 코드와 동작 방식을 확인하실 수 있습니다.  

로그인 후에 true로 설정되는 authenticated 값을 localStorage.setIem 함수에 authenticated라는 변수명과 동일한 key 값과 authenticated 변수를 value로 전달하여 localStorage에 저장하였습니다. 

그리고 AuthRoute로 로그인 후에만 Routing 될 수 있는 컴포넌트에 해당 값을 localStorage.getItem("authenticated")로 전달하면 authenticated=true 값은 새로고침을 해도 계속 유지되어 로그인 된 상태를 유지할 수 있게 됩니다. 

 

 

---

References

• www.daleseo.com/react-router-authentication/