[React-Redux] redux-react-session 사용시 페이지 새로고침에도 default Header 값 유지하기

Redux-react-session을 이용시, 사용자 인증(로그인, 토큰 관리)을 라이브러리를 통해 하게 된다.

내 경우는 로그인 처리시에 완료 후, axios (RESTful API for React) 에 default header를 세팅하게 된다. AngularJS를 사용할 때 $resource를 사용하던 버릇이랄까.

뭐 대충 위와 같은 식으로..

그런데 이렇게 default header를 세팅해두더라도, 새로고침하면 다시 없어진다. 음, 분명 LocalStorage에 저장되어 있는 것을 확인했는데도 말이다.

이유인 즉, 결국 새로고침시에 최상단 부모에서 최소 1회의 action호출을 통해 다시금 sessionService.loadSession() 을 해서 axios의 기본 헤더를 채워줘야 한다.

나의 경우는 App.js 가 최상단(index.js제외) 컴포넌트라서 이곳의 componentDidMount() 에서 아래와 같이 처리했다.

생각보다 간단하다. 리엑트에서는 Top-down방식임을 잊지 않도록 노력해야 할듯.. 최소 initialize() 액션을 둬서, 이곳에서 초기값으로 불러와야 하는 것들을 잘 정해줘야 하는게 관건이 될 것 같다. 🙂

Translate »