[TIL] 로그인 후 뒤로가기 막기(로그인페이지)

https://developer.mozilla.org/ko/docs/Web/API/History/pushState

mdn 참고

history.pushState(null, document.title, "#back"); 

window.onpopstate = function() { 
  history.go(1); 
};

spa특징을 이해하기.
클라이언트 사이드 렌더링으로 모든 페이지를 뿌리고 난 후에 특정 페이지
로직에 출력을 원할 때 막기를 원한다면 해당 로직을 수정

이런 댓글도 발견

---

vue router를 사용중 이면 로그인 후 로그인 화면에서 router.push가 아니라 router.replace로 다음 페이지로 이동 시키면 router history에 login페이지 url이 남지 않게 됨으로 뒤로 가기시에 로그인 페이지로 가지 않게 됩니다.

여기서 유의점은 location.href 와 router.push 또는 location.replace 와 router.replace를 혼용 해서 사용 해서는 안됩니다. location과 router는 각각 독립적인 history를 가지고 있기 때문입니다.

---

위에는 그냥 막는거고

고급스럽게 접근 하기 위해서 router push와 router replace의 차이를 일단
명확하게 파악 완료

그럼 자신이 원하는 페이지에 맞게 replace를 적용하고,

라우터에서 분기를 나눠 주면 된다.

로컬 스토리지에 로그인이 저장되어있는 상태라면

const router = new VueRouter({
  mode: "history",
  routes: [
    { 
      path:"/", 
      component: Home,
    },
    { 
      path:"/login", 
      component: Main,
      
    },
    {
      path:"*",
      component: Home,
    }
  ],
});

router.beforeEach(function (to, from, next) {
  if(localStorage.guest) { // 그냥 로그인 된 상태인지 아닌지 여부
	next('/');
  }	else {
  		next(); //페이지 전환 이루어 짐.
	}
}

일단 이렇게 해서 해결..

뒤로가기 할때마다 어차피 라우터는 계속 동작해 준 다는걸 기억