[웹개발 100일] Day 31 - 로그아웃 기능, 프로필 페이지 (마이페이지) 구현

 

 

 

 

 

어제를 반성하며 로그아웃 버튼을 만들었어요.

내비게이션에서 유저 이름 클릭하면 > 프로필 페이지로 이동하고 > 로그아웃 버튼 누르면 > 토큰 삭제되며 홈으로 돌아감

 

 

---

🚀 요약

작업 시간: 3시간반
✅ 로그아웃 기능 구현
✅ 프로필 페이지 구현

 

 

---

🚀 프로필 (내 정보 수정) 페이지 구현

프로필 페이지 - 아직 미완!

Save Changes 버튼은 작동 안 하고 UI 구색만 갖춰놓았습니다

 

const handleSignOutClick = () => {
    axios
      .post(
        "http://localhost:5232/api/auth/logout",
        {},
        { withCredentials: true }
      )
      .then((response) => {
        if (response.data.success) {
          setIsSignedIn(false);
          navigate("/");
        } else {
          showErrorMessage("Invalid email or password.");
        }
      })
      .catch((err) => {
        showErrorMessage("Invalid email or password.");
      });
};

사인아웃 버튼 클릭 시 API 요청 날림

 

[HttpPost("logout")]
public async Task<IActionResult> Logout()
{
    Response.Cookies.Delete("jwt");
    return Ok(new { success = true, message = "Logged out successfully" });
}

백엔드에서 요청 받아 쿠키 데이터 삭제!

 

 

오늘 작업 끝