[쉘위헬스] 로그인 기능 구현

회원가입에 이어 로그인 기능을 구현하게 되면서 Auth인증과 일반유저 로그인 기능을 구현하였다
그 과정속에서 axios로 받아오는 데이터의 값이 err 일 경우.then 이 아닌 catch로 분기로 나눠줘야 한다는 사실을 알게 되었다.

---

로그인 핸들러 함수

  const handleLogin = async () => {
    const { email, password } = loginInfo
    await axios.post(`${process.env.REACT_APP_SERVER_API}/user/login`, { email, password },
      {
        withCredentials: true
      })
      .then((res) => {
        if (res.status === 204) {
          /* 이메일 또는 비밀번호가 틀린경우 */
          setLoginFail(true)
        }
        else {
          /* 로그인 성공했을때 */
          handleModal()
          window.location.reload('/')

        }
      })
      .catch((err) => {
        console.log(err.response)
        if (err.response.status === 403) {
          /* 비밀번호,이메일 맞는데 이메일회원가입인증 안했을 경우*/
          setLoginFail(false)
          setFailModal(true) // 실패 모달 띄워주기
        }
      })
  }

입력한 이메일과 비밀번호가 일치하지만 가입시에 메일인증이 안되었을때
서버에서 403에러코드로 넘겨주었는데 위 코드를 받게되면 catch로 빠지게 되어서
분기를 catch에서 잡아주어야 했다
위 처럼 에러를 받았었던 적이 없어서 찾아보았더니 에러에서도 분기를 나눠줄 수 있다는 사실을 알게되었다.
아마 이전에 배웠었는데 잠시 잊고있었던것 같다..

---

로그인기능 구현을 완료하고 App부분에 Auth인증하기

App 부분에 Auth인증 (리듀서사용)

  const isAuthenticated = useCallback(async () => {
    await axios
      .get(`${process.env.REACT_APP_SERVER_API}/user/auth`, {
        withCredentials: true,
      })
      .then((res) => {
        if (res.data.data) {
          const { isLogin, decoded } = res.data.data
          dispatch(
            login({
              isLogin: isLogin,
              isAdmin: decoded.isAdmin,
              isOauth: decoded.isOauth,
              id: decoded.id,
              nickname: decoded.nickname,
              email: decoded.email,
            })
          );
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, [dispatch])

---

참고 블로그

useEffect Error
블로그 : https://kyounghwan01.github.io/blog/React/exhaustive-deps-warning/#_1-useeffect%E1%84%82%E1%85%A2-state%E1%84%85%E1%85%B3%E1%86%AF-%E1%84%82%E1%85%A5%E1%87%82%E1%84%8B%E1%85%A5%E1%84%8C%E1%85%AE%E1%86%B7

axios
블로그 : https://yamoo9.github.io/axios/guide/error-handling.html
공식 홈페이지 : https://yamoo9.github.io/axios/guide/error-handling.html