작업하면서 F5를 참 많이 눌렀다. 그러면서 F5로 인한 버그도 참 많이 봤다. 많은 페이지 중에서도 회원가입, 전체 비밀번호 찾기 페이지 같은 경우에는 에러가 왕왕 발생했었다. 지금은 다 잡긴 했지만, 새로고침은 에러를 발생시킬 수 있기 때문에 이 두 페이지에 한해서 새로고침 방지 처리를 하고자 한다.
기능의 구현은 다음과 같다.
현재 전체 비밀번호 찾기 기능은 유저가 입력한 아이디를 쿠키에 저장하고, 그 아이디와 함께 입력한 다른정보를 통해 유저 정보를 DB에서 불러오고 있다.
이때 쿠키에 저장된 유저 아이디를 메일을 보내면 즉시 쿠키에서 삭제하고 이로인해 뒤로가기나 새로고침을 했을 때 유저 정보를 페이지에서 못 불러오게 하는 것이다.
우선 1. 전체 비밀번호 메인 전송 안내 페이지의 뒤로가기와 새로고침을 방지한다. 정상적인 메인 전송 화면_뒤로가기를 클릭하면 로그인 메인 화면으로 이동한다. 새로고침을 클릭하면 다음과 같은 페이지가 출력된다.
//새로고침, 뒤로가기, 나가기 시 경고창 함수
function f5Control(event){
event.preventDefault();
event.returnValue = '';
}
//페이지 로딩되면 기존 인증번호 쿠키 삭제
$(function(){
//새로고침, 뒤로가기, 나가기 시 경고창 함수 출력
window.addEventListener('beforeunload', f5Control);
//뒤로가기 단축키을 누르면 로그인 메인으로 이동(Alt + <- 기능)(브라우저 뒤로가기 버튼은 막히지 않음)
window.history.pushState(null, null, window.location.href);
window.onpopstate = function(event) {
window.history.pushState(null, null, window.location.href);
window.location.href= "<c:url value='/Login'/>";
};
$("#goLogin").on("click", function(){
window.removeEventListener('beforeunload', f5Control);
})
});
그런데 이런 기능은 뒤로가기를 근본적으로 막았다기 보다는 페이지 이동을 하게 만든 것이라고 보는 것이 타당하다. 그래서 그 전전 페이지로 이동할 경우, 그 이동은 가능하다.
2. 따라서 전전 페이지의 자식창 출력 기능을 정지시킴으로서 유저가 정상적인 접근을 하도록 만든다. 정상적인 출력화면
비정상적인 접근일 경우
3. 회원가입 페이지의 경우, 뒤로가기 시 로그인 메인 화면으로 이동시킨다. 4. 또한 회원가입 페이지는 @PostMapping으로 이동하기 때문에 새로고침 시 @GetMapping으로 부르고 @GetMapping은 에러 페이지로 이동하게 만든다.
비정상적인 접근 / 회원가입 페이지에서 새로고침을 누를 경우, 가는 페이지
//새로고침, 뒤로가기, 나가기 시 경고창 함수
function f5Control(event){
event.preventDefault();
event.returnValue = '';
}
//페이지 로딩되면 기존 인증번호 쿠키 삭제
$(function(){
//새로고침, 뒤로가기, 나가기 시 경고창 함수 출력
window.addEventListener('beforeunload', f5Control);
//뒤로가기 단축키을 누르면 로그인 메인으로 이동(Alt + <- 기능)(브라우저 뒤로가기 버튼은 막히지 않음)
window.history.pushState(null, null, window.location.href);
window.onpopstate = function(event) {
window.history.pushState(null, null, window.location.href);
window.location.href= "<c:url value='/Login'/>";
};
});
3일 걸렸다... 새로고침 방지, 뒤로가기 방지가 이렇게 어려울 줄은 몰랐다. 찾아보니 브라우저 보안 문제로 인해 막혀있다고 한다. 그래서 나도 사실상 막았다기 보다는 대신 페이지 이동을 시키거나, 진행을 못하게 하는 방식으로 저지했다. 아...이게 이렇게 오래 걸릴 줄이야
