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

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

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

export function signinUser(headers, callback) {
    return function(dispatch) {
        axios.get(`login`, {headers})
            .then(response => {
                const {token, userinfo} = response.data
                setHeaders(token)

// 세션 처리 결과 처리
            })
            .catch(error => {
                dispatch(authError(error.response.data.err))
        })
    }
}

export function setHeaders(token){
    axios.defaults.headers.common[AUTH_TOKEN] = token
    axios.defaults.headers.post[AUTH_TOKEN] = token
    axios.defaults.headers.get[AUTH_TOKEN] = token
    axios.defaults.headers.delete[AUTH_TOKEN] = token
}

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

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

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

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

// App.js
class App extends Component {
    componentDidMount() {

        this.props.initialize()

    }
    render() {
        //중략
    }

}

// InitAction.js

export function initialize() {
    return function(dispatch) {
        sessionService.loadSession()
            .then(token => {
                setHeaders(token)
            })
    }
}

function setHeaders(token){
    axios.defaults.headers.common[AUTH_TOKEN] = token
    axios.defaults.headers.post[AUTH_TOKEN] = token
    axios.defaults.headers.get[AUTH_TOKEN] = token
    axios.defaults.headers.delete[AUTH_TOKEN] = token
}

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