pre-project 14일차 (22.09.04. 로그인 유지)

✅ 오늘한 일

로그인 유지

우리팀은 쿠키대신 로컬스토리지에 토큰값을 담아주기로 했다. 그렇기 때문에 리덕스를 사용하여 토큰값이 있을 경우를 로그인중이라고 알려주는 역할을 하면 될 것 같았다. 하지만, 아래와 같은 오류가 발생했고, 해답 또한 찾아냈다.

• 오류: 처음엔 리덕스에 담아서 로그인 중이라는 것을 알려주면 된다고 생각하였지만, 스토어에 담긴 상태값은 웹 브라우저를 새로고침 할 때, 초기화가 된다고 한다. 이사실을 모르고 ‘왜?자꾸 로그아웃이 되는가?’ 에 대한 의문을 품어 다양한 방법으로 시도를 하였다.
• 해답: 로그인 중인 상태를 App.js 파일에서 처리를 해주면 된다. 우리팀의 경우 로그인시 헤더에 담겨서 넘어오는 토큰을 로컬스토리지에 담고 있다. 이때, 로컬스토리지에 담긴 토큰의 값이 undefined가 아니라면 로그인 중인 상태인 것을 App.js에서 판별해주면된다. 그냥 판별하게 될 경우 에러가 나니 useEffect를 사용하여 화면이 처음 렌더링 될 때 판별을 해주는 코드를 작성하니 새로고침이 되도 로그인 유지가 되고 있었다.

//App.js
useEffect(() => {
    if(localStorage.getItem("authorization") !== null){
        dispatch(loginSuccess());
    }
}, [])

📌 해야할 일

• 로그아웃 기능 구현
• 최종 배포