[JavaScript] 로그인 했을 때만 사용 가능한 페이지

 안녕하세요 코북입니다. 오늘은 로그인했을 때만 서비스 페이지를 이용할 수 있게 하기 위한 작업을 해줬습니다. jsp와 javascript를 이용해서 간단하게 만들 수 있었습니다.

 

■ jsp

<div class="flex-fill mx-xl-5 mb-2">
	<ul class="nav navbar-nav d-flex justify-content-between mx-xl-5 text-center text-dark">
		<li class="nav-item">
		  <a class="nav-link btn-outline-primary rounded-pill px-3" onclick="service()">서비스</a>
		</li>
		<li class="nav-item">
		  <a class="nav-link btn-outline-primary rounded-pill px-3" href="Event.do">이벤트</a>
		</li>
		<li class="nav-item">
		  <a class="nav-link btn-outline-primary rounded-pill px-3" href="boardList.do">공지</a>
		</li>
	</ul>
</div>

 서비스 페이지는 클릭 시 페이지를 이동시키는 것이 아니라 onclick으로 함수가 실행될 수 있도록 설정했습니다.

 

 

■ JavaScript

    <script>
    	function service(){
    		let signIn = "${signIn}";
    		if (signIn == ""){
    			alert("서비스 페이지는 로그인 후 사용하실 수 있습니다.");
    			location.href="${cpath}/login.do";
    		} else {
    			location.href="${cpath}/service.do"
    		}
    	}
    </script>

signIn 변수에 로그인 시 session으로 넘어오는 값을 담아줬습니다. 값이 넘어오지 않으면(공백일 경우) 알림 창과 함께 로그인 페이지로 이동시키고, 값이 넘어오면 서비스 페이지로 이동시킵니다.

 

구현 화면

 

잘 구현됩니다.

 

사용 기술

JavaScript, EL

 

배운 점

 ${signIn}으로 넘어오는 값에 따옴표("")를 해주지 않으면 값을 signIn이라는 변수로 인식하는 문제가 있었습니다. 컴퓨터가 값을 공백으로 인식하게 하려면 따옴표를 추가해 String타입으로 바꿔줘야 했습니다. if문 조건을 줄 때도 null이 아니라 공백일 때 조건을 줘야 했습니다.