내일배움캠프 4기_Node 3차 미니프로젝트 html 가져오기

내일배움캠프 4기_Node 3차 미니프로젝트 html 가져오기

---

 

팀원분이 짠 코드 나도 나중에 써먹기 위해 공부!

 

📄 logout.ejs (html)

<script>
  $(document).ready(function () {
      // 토큰이 있을 경우 로그인 기능 hide & 페이지 이동
      const token = $.cookie("token");
      if (token) {
          $('#btn_logout').show();
      }
  });
  function logout() {
      $.removeCookie("token", { path: "/" });
      window.location.href = '/api/login';
  }
</script>
<button id="btn_logout" type="button" class="btn btn-dark" onclick="logout()" style="display: none">로그아웃</button>

 

로그아웃 버튼을 넣고 싶은 곳에

<%-include('logout.ejs')%>

이렇게 넣어주면 된다.

 

---

📌 CSS 설정

 

이 버튼을에 대한 설정은 다음과 같이 해주면된다.

<div class="col-md-3">
    <div style="text-align: center; float: right">
    	<%-include('logout.ejs')%>
	</div>
</div>

버튼 내부의 텍스트는 센터! 

오른쪽으로 가게끔!