[ Feat ] 로그인 관련 에러 처리 (존재하지 않는 회원일 경우, 토큰 만료)

[lydiacho]

#️⃣ Related Issue

Closes #330

✅ Done Task

• 비회원이 로그인 시도할 경우 에러 처리
• 만료된 토큰으로 통신할 경우 에러 처리

💎 PR Point

1️⃣ clearStorage 유틸함수 추가

localStorage에 저장되어있는 토큰에 문제가 있을 경우, 저장되어있는 토큰/role 정보를 모두 삭제해주는 함수를 유틸함수에 추가해놨습니다!

2️⃣ 비회원 유저의 로그인 시도 시, 회원가입 유도

기존에는 회원가입이 아닌 로그인인데 서버에서 응답으로 role을 안넘겨줬을 경우, 서버 로직 상의 오류로 판단해서 그냥 console.error만 찍어두게 해놨었는데요, 생각해보니 해당 케이스가 충분히 사용자 단에서도 발생할 수 있는 케이스더라구요.

저희가 로직상, 사용자가 온보딩을 시작하면 무조건 localStorage에 발급된 토큰이 저장되는데요, 그러다가 온보딩 중간에 이탈하는 경우

• 사용자의 localStorage에는 토큰이 저장되어있는데
• DB에 회원으로는 들어가있지 않은

상황이 돼요. 그 상황에서 사용자가 회원가입이 아닌 로그인을 시도하면 서버에서 role을 응답받지 못해서 해당 케이스로 빠져버리게 됩니다.

이런 경우 저장되어있던 가입 완료되지 않은 토큰을 삭제해주고, 다시 회원가입을 유도해야 해요.
따라서 1) 회원가입 유도 alert 2) clear Storage 3) 최초 페이지로 이동 시켜주도록 구현해놨습니다.
(괵에게 전달 완료!)

3️⃣ 토큰 만료 시 재로그인 유도

만료된 토큰으로 authAxios를 쓸 경우, 즉 만료된 토큰을 헤더에 넣어서 api 통신을 요청한 경우, 아래와 같은 에러가 발생해요.

따라서 axios.interceptors.response 를 통해 API 응답에 에러를 캐치해서, 에러 code가 40076일 때만 만료 토큰 처리를 해주도록 구현했어요.

원래는!!! 이 부분에 리프레시 토큰 로직을 넣어줘야 하는데요, 서버분들 리소스 상황상 다음주 전까지 리프레시 토큰 API를 구현하기 어려운 상황이라구 하셔서, 우선 리프레시 도입 전까지만 해당로직으로 만료 토큰 처리해주면 될 것 같아요

이때도 동일하게 기존에 저장되어있던 토큰을 지우고, 다시 로그인을 통해 새 토큰을 발급받도록 유도해야 하기 때문에
1) alert 띄워주고 2) clear Stroage 3) 최초 페이지로 이동 시켜줍니다!

2번과의 로직 차이점이 하나 있는데,
axios.interceptors 로직은 리액트 컴포넌트 / 리액트 훅 내에 구현되는 친구가 아니라서 useNavigate hook을 사용할 수 없어요.
따라서 navigate말고 location.href로 최초 페이지로 이동시켜줬습니다

📸 Screenshot

비회원이 로그인 시도할 경우!

e.i.i.mov

만료된 토큰으로 통신 시도할 경우!

e.e.mov

[se0jinYoon]

lgtm

[ijieun]

LGTM!