2023-06-17 TIL

[js] 주소창에 주소 입력해서 들어오는 것 막기

대부분의 사이트에서,
특정 기능들은 주소창에 주소를 입력해서 들어오면 잘못 된 접근이라고 하면서 홈으로 돌려보내는 기능이 있다.

그런 기능을 js를 통해서 간단하게 막아보자!!

이번에는 간단하게, 버튼을 눌러서 들어온 경우를 빼고는
접근하지 못하게 하려고 한다.

💡 코드 작성

먼저 클릭하면 페이지로 이동할 수 있게 하는 버튼에 코드를 추가해준다.

document
  .getElementsByClassName("drawal-btn")[0]
  .addEventListener("click", goDeleteUser);
document
  .getElementsByClassName("pass-edit")[0]
  .addEventListener("click", goEditPassword);

function goDeleteUser() {
  localStorage.setItem("btnHref", "true");
  window.location.href = `${FRONT_BASE_URL}/html/delete.html`;
}

function goEditPassword() {
    localStorage.setItem("btnHref", "true");
  window.location.href = `${FRONT_BASE_URL}/html/edit_pw.html`;
}

이런식으로,
특정 버튼을 클릭했을 때 링크로 넘어감과 동시에
localStorage에 btnHref라는 요소를 넣어준다.

window.onload = function () {
  let fromBtn = false;
  if (localStorage.getItem("btnHref") === "true") {
    fromBtn = true;
  }

  localStorage.removeItem("btnHref");

  if (!fromBtn) {
    alert("잘못된 접근입니다.");
    window.location.replace(`${FRONT_BASE_URL}/html/home.html`);
  }
};

그리고 접근 차단을 해줄 페이지에서
버튼을 통해 들어와서 localStorage값이 제대로 저장되어 있는지 확인해주고
fromBtn을 true 값으로 설정해준다.

만약, fromBtn이 true가 아니라면
잘못된 접근이라는 alert창을 띄워주고
메인 페이지로 보내준다.