[프로젝트] 12. 로그인/로그아웃 버튼 처리 (Week 3)

JSTL을 활용하여

로그인한 경우에는 로그아웃 버튼을 활성화 

로그인하지 않은 경우에는 로그인/회원가입 버튼을 활성화하여 보여주도록 함.

 

앞서 세션 정보에 로그인 아이디를 (userId) 사용하여 체크함. 

 

[ incHeader.jsp ] - 수정 

 jstl 사용을 위한 선언문 
<c:if> 태그를 이용하여 경우에 따라 보여줄 버튼을 처리

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<!-- Mobile Nav (max width 767px)-->
<div class="mobile-nav">
    <!-- Navbar Brand -->
    <div class="amado-navbar-brand">
        <a href="/"><img src="/resources/img/core-img/logo-th.png" alt=""></a>
    </div>
    <!-- Navbar Toggler -->
    <div class="amado-navbar-toggler">
        <span></span><span></span><span></span>
    </div>
</div>

<!-- Header Area Start -->
<header class="header-area clearfix">
    <!-- Close Icon -->
    <div class="nav-close">
        <i class="fa fa-close" aria-hidden="true"></i>
    </div>
    <!-- Logo -->
    <div class="logo">
        <a href="/"><img src="/resources/img/core-img/logo-th.png" alt=""></a>
    </div>
    
    <!-- Amado Nav -->
    <nav class="amado-nav">
        <ul>
            <li class="active"><a href="/">메인</a></li>
            <li><a href="/prod">상품</a></li>
            <li><a href="/board">게시판</a></li>
            <li><a href="/cart">장바구니</a></li>
            <li><a href="/mypage">마이페이지</a></li>
            <sec:authorize access="hasRole('ROLE_ADMIN')">
            <li><a href="/userAdm">회원관리페이지</a></li>
            <li><a href="/prodAdm">상품등록페이지</a></li>
           	</sec:authorize>
        </ul>
    </nav>
    
    <!-- Button Group -->
    <div class="amado-btn-group mt-30 mb-100">
    	<c:if test="${userId != null}"> 
    		<p>반가워요 ${userId}님</p>
    		<a href="/logout" class="btn amado-btn active">로그아웃</a>
    	</c:if>
    	<c:if test="${userId == null}"> 
    		<a href="/login" class="btn amado-btn mb-15">로그인</a>
        	<a href="/register" class="btn amado-btn active">회원가입</a>
    	</c:if>
    </div>
    <!-- Cart Menu -->
    <div class="cart-fav-search mb-100">
        <a href="cart.html" class="cart-nav"><img src="/resources/img/core-img/cart.png" alt=""> Cart <span>(0)</span></a>
        <a href="#" class="fav-nav"><img src="/resources/img/core-img/favorites.png" alt=""> Favourite</a>
        <a href="#" class="search-nav"><img src="/resources/img/core-img/search.png" alt=""> Search</a>
    </div>
    <!-- Social Button -->
    <div class="social-info d-flex justify-content-between">
        <a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
        <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
        <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
        <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
    </div>
</header>
<!-- Header Area End -->

 

 

[ 로그인하지 않은 경우 ]

 

[ 로그인한 경우 ]