회원탈퇴 시 쿠키 삭제하기(JavaScript)

웹페이지 내에서 회원탈퇴를 진행하였으나 회원탈퇴가 되지 않고 다시 재로그인이 된다는 이슈가 발생했다.

네이버/카카오톡 간편 로그인을 포함한 모든 로그인 계정에서 이와 같은 이슈가 발생하고 있었다.

 

DB에서는 탈퇴한 회원은 status 컬럼에 'N'으로 표시한다.

그리고 탈퇴한 회원도 일정 시간 데이터로 남겨둔다.

고로, 데이터 상으로는 전혀 문제가 없으며 탈퇴한 회원도 데이터가 남아있어야 하는 것이 정상이다.

 

결론적으로 말하자면 회원탈퇴를 진행하여도 사용자의 로그인 계정정보를 담고 있는 쿠키가 남아있어 발생한 현상이다.

 

회원탈퇴를 진행함과 동시에 기존 마이페이지에서 메인 페이지로 이동하게 되는데,

이때 메인 페이지에서 로그인을 진행하지 않은 화면이 출력되어야 하는 것이 정상이지만

제거되지 않은 쿠키가 계정정보를 갖고 있어 탈퇴를 진행했음에도 로그인이 여전히 되어 있는 문제가 발생하게 된다.

 

그렇다면 해결책은 회원탈퇴 버튼을 클릭하여 성공적으로 탈퇴가 진행됨과 동시에 모든 쿠키를 강제로 제거해주는 것.

 

회원탈퇴 로직과 관련된 스크립트측에서 쿠키를 제거하는 로직을 추가한다.

 

회원탈퇴 진행 함수

function deleteCustomer() {
	$.ajax({
    	url : "deletecustomer",
        type : "POST",
        headers : {
        	"Content-Type" : "application/json"
        },
        //생략
        dataType : "json",
        success : function(data) {
        	deleteAllCookies();
        },
        error : function(request, status, error) {
        //생략
        }
	})
}

 

deleteAllCookies() 함수를 만들어서 회원탈퇴 성공 시 해당 함수가 실행되도록 하였다.

deleteAllCookies() 함수는 현재 도메인의 모든 쿠키를 삭제하는 로직을 담았다.

 

쿠키 삭제 함수

function deleteAllCookies() {
	const cookies = document.cookie.split(";");
    
    for (let i = 0; i < cookies.length; i++) {
    	const cookie = cookies[i];
        const eqPos = cookie.indexOf("=");
        const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
        
        // 쿠키 삭제
        document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    }
}

 

document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

스크립트에서 쿠키를 삭제하는 코드이다.

 

1) document.cookie:

현재 문서의 쿠키를 설정하거나 가져오는 속성

 

2) name + "=":

삭제할 쿠키의 이름을 name 변수로 지정하고, 그 값을 빈 문자열("")로 설정한다.

쿠키의 값을 빈 문자열로 설저암으로써 해당 쿠키를 삭제하게 된다.

 

3) expires=Thu, 01 Jan 1970 00:00:00 UTC:

expires 속성은 쿠키의 만료 날짜를 설정한다.

1970년 1월 1일은 Unix 시간의 시작점인데, 이 날짜로 설정하여 쿠키가 즉시 만료되도록 한다.

즉, 이 날짜 이후에는 쿠키가 유효하지 않게 되어 브라우저가 해당 쿠키를 삭제하게 하는것이다.

 

4) path=/:

path 속성은 쿠키가 유효한 경로를 지정한다.

/로 설정하면 해당 도메인의 모든 경로에서 쿠키가 유효하다는 의미이다.

따라서 이 쿠키는 웹사이트의 모든 페이지에서 접근 가능하다.

---

deleteAllCookies() 함수에 작성된 코드는 특정 쿠키를 삭제하기 위해 그 쿠키의 이름을 빈 값으로 설정하고,

만료 날짜를 과거로 설정하여 브라우저에 해당 쿠키를 삭제하도록 지시한다.