스프링과 JPA 기반 웹 애플리케이션 개발 #17 회원 가입 메인 네비게이션 메뉴

Jake Seo·2021년 5월 29일

스프링과 JPA 기반 웹 애플리케이션 개발

목록 보기

18/63

해당 내용은 인프런, 스프링과 JPA 기반 웹 애플리케이션 개발의 강의 내용을 바탕으로 작성된 내용입니다.

강의를 학습하며 요약한 내용을 출처를 표기하고 블로깅 또는 문서로 공개하는 것을 허용합니다 라는 원칙 하에 요약 내용을 공개합니다. 출처는 위에 언급되어있듯, 인프런, 스프링과 JPA 기반 웹 애플리케이션 개발입니다.

제가 학습한 소스코드는 https://github.com/n00nietzsche/jakestudy_webapp 에 지속적으로 업로드 됩니다. 매 커밋 메세지에 강의의 어디 부분까지 진행됐는지 기록해놓겠습니다.

회원 가입: 네비게이션 메뉴 변경

네비게이션 뷰
- 인증 정보가 없는 경우
- 인증 정보가 있는 경우
타임리프 스프링 시큐리티 적용

<dependency>
  <groupId>org.thymeleaf.extras</groupId>
  <artifactId>thymeleaf-extras-springsecurity5</artifactId>
</dependency>

인증 정보가 없는 경우
- 로그인 / 가입 버튼 보여주기
인증 정보가 있는 경우
- 알림 / 스터디 개설 / 프로필 드롭다운 메뉴 보여주기
- 이메일 인증을 하지 않은 사용자의 자동 로그인은 "인증" 경고 창 보여주기

스프링 시큐리티 타임리프 확장팩 설치하기

<!-- 타임리프 확장팩, 타임리프가 스프링 시큐리티5를 지원할 수 있게 됨 -->
<dependency>
  <groupId>org.thymeleaf.extras</groupId>
  <artifactId>thymeleaf-extras-springsecurity5</artifactId>
</dependency>

위의 확장팩을 설치하면, 타임리프에서도 스프링 시큐리티를 이용한 인증에 따른 뷰 페이지 출력이 가능하다.

네비게이션 바의 내용을 인증에 따라 다르게 처리해주기

<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

...
<ul class="navbar-nav justify-content-end">
  <li class="nav-item" sec:authorize="!isAuthenticated()">
    <a class="nav-link" th:href="@{/login}">로그인</a>
  </li>
  <li class="nav-item" sec:authorize="!isAuthenticated()">
    <a class="nav-link" th:href="@{/sign-up}">가입</a>
  </li>
  <li class="nav-item" sec:authorize="isAuthenticated()">
    <a class="nav-link" th:href="@{/notifications}">알림</a>
  </li>
  <li class="nav-item" sec:authorize="isAuthenticated()">
    <a class="nav-link btn btn-outline-primary" th:href="@{/notifications}">스터디 개설</a>
  </li>
  <li class="nav-item dropdown" sec:authorize="isAuthenticated()">
    <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      프로필
    </a>
    <div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="userDropdown">
      <h6 class="dropdown-header">
        <span sec:authentication="name">Username</span>
      </h6>
      <a class="dropdown-item" href="#" th:href="@{'/profile/' + ${#authentication.name}}">프로필</a>
      <a class="dropdown-item" href="#">스터디</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#" th:href="@{'/settings/profile'}">설정</a>
      <form class="form-inline my-2 my-lg-0" action="#" th:action="@{/logout}" method="post">
        <button class="dropdown-item" type="submit">로그아웃</button>
      </form>
    </div>
  </li>
</ul>
...