JWT 로그인을 구현하면서 발생한 문제 정리2

요약

1편에서 리덕스로 로그인을 구현하였는데 새로고침하면 저장했던 변수값이 초기화 되는 현상을 발견했고, 따로 redux로 로그인을 관리하려면 추가적인 모듈이 필요하다는 것을 확인했습니다. 하지만 잘 사용되지 않았고 주로 cookie를 사용한다고 하여 cookie로 바꾸게 되었습니다.

 

구현 과정

리덕스로 토큰을 받아 현재 로그인 상태를 관리하고 있던 중 새로고침을 하게 되면 로그인이 풀리는 현상을 발견하게 되었습니다. 확인해본 결과 redux 문제였고 React는 SPA로 동작하기 때문에 발생할 수 있다고 생각하여 수정하게 되었습니다.

 

몇가지를 더 찾아보니 추가적인 모듈을 설치하게 되면 로컬 스토리지로 저장하여 사용할 수 있다는 문서를 확인하였지만 로컬 스토리지는 이번 로그인 구현 방식와 맞지 않아 쿠키로 변경하여 구현하고자 했습니다.

 

https://www.npmjs.com/package/react-cookie

react-cookie

 

이후 공식문서를 보며 진행하였고 간단한 설정을 통해 사용할 수 있었습니다.

import { useCookies } from 'react-cookie';

 const [cookies, setCookie, removeCookie] = useCookies(['Token']);
 
    const onSubmit = (data) => { 
        axios.post(`/users/login`, data)
        .then(function (response) {
        if(response.data.loginSuccess) {
            axios.defaults.headers.common['token'] = response.data.token; 
            setCookie('Token', response.data.token, { path: '/' }); 
        }
        })
        .catch(function (error) {
            // handle error
            console.log(error);
        })
        .then(function () {
            // always executed
        });
    }

    const test = () => { //로그아웃
        axios.get(`/users/auth`)
        .then(function (response) {
            removeCookie('Token') 
        })
        .catch(function (error) {
            // handle error
            console.log(error);
        })
        .then(function () {
            // always executed
        });
    }

 

토큰 값이 로그인 되어있는 걸 확인했습니다

 

 

로그아웃 되는 것도 확인

 

회고

현재 리액트로 구현을 하고 있기 때문에 리액트 훅 등을 활용하여 구현하는 것에 고민을 해보고 구글링하면서 이해하고 구현하는 것도 왠만하면 가급적 공식문서를 참고하면서 구현한다면 더 좋은 결과를 만들 수 있을거라고 생각됩니다