# 1. 유저 리스트 페이지
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{Part/header :: header}">
</head>
<nav th:replace="~{Part/navbar :: navigation}"></nav>
<body>
<div class="alert alert-primary" th:if="${result != null}" role="alert">
<h3>[[${result}]]</h3>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">번호</th>
<th scope="col">사용자명</th>
<th scope="col">이메일</th>
<th scope="col">활성화</th>
<th scope="col">계정 편집</th>
</tr>
</thead>
<tbody>
<tr th:each="everyUser :${usersList}">
<td>[[${everyUser.id}]]</td>
<td>[[${everyUser.username}]]</td>
<td>[[${everyUser.email}]]</td>
<td><a th:if="${everyUser.enabled == false}"><i class="bi bi-x-circle h3"></i></a>
<a th:if="${everyUser.enabled == true}"><i class="bi bi-check-lg h3"></i></a>
</td>
<td><i class="bi bi-pencil-square h3"></i>
<a th:href="@{'/v1/deleteUser/' + ${everyUser.id}}"> <i class="bi bi-trash-fill h3"></i></a></td>
</tr>
</tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
노란색 박스 처진 부분을 보면 컨트롤러부터 userList라는 객체를 받아와서 반복문 th:each로 everyUser로 뿌려주는 역할을 한다. 그리고 everyUser에 id , username , email 등이 들어있어서 , 라인마다 사용자의 정보를 확인 할 수 있다.
코드를 실행시키면 위와 같은 모양으로 나온다 .
# 2. 인증된 사용자에 따른 Navigation 바 분류하기
<!-- 2024 4/5
author: LeeJongAnn
description: when you want to use thymeleaf-springSecurity , you have to add below xmlns namespace
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
-->
<html th:fragment="security" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" th:fragment="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">영화 리뷰</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div class="navbar-toggler-icon"></div>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" th:href="@{/v1/popular}">인기영화순</a>
</li>
<!-- 2024 4/5
author: LeeJongAnn
description: login person can only see when you use sec:authorize="isAuthenticated()"
-->
<li sec:authorize="isAuthenticated()" class="nav-item">
<a class="nav-link" th:href="@{/v1/userList}">사용자 리스트</a>
</li>
<!-- 2024 4/5
author: LeeJongAnn
description: login person can only see when you use sec:authorize="isAuthenticated()"
-->
<li sec:authorize="isAuthenticated()" class="nav-item">
<a class="nav-link" th:href="@{/v1/board}">게시판</a>
</li>
<li sec:authorize="isAnonymous()" class="nav-item">
<a class="nav-link" th:href="@{/v1/signUser}">회원가입</a>
</li>
<li sec:authorize="isAnonymous()" class="nav-item">
<a class="nav-link" th:href="@{/v1/login-page}">로그인</a>
</li>
<li sec:authorize="isAuthenticated()" class="nav-item">
<a class="nav-link" th:href="@{/v1/logout}">로그아웃</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
위의 코드로 네비게이션 바를 봤을때 아래와 같은 모양이다.
회원가입 로그인 인기영화순 이런 식으로 나와있는데,
만약에 로그인을 하게 되면 이 네비게이션 바가 바뀌게 된다.
그것은 바로 Thymeleaf에 있는 코드 때문이다. 이 코드는 Spring Security 와 연동되어 있어서 사용하게 되면
인증된 회원만 스프링 해당 내용을 확인 할 수 있게 된다.
sec:authorize="isAuthenticated()"
내용을 넣고 로그인을 하게 된다면 네비게이션 바가 아래와 같이 바뀌는 것을 알 수 있다.
로그인 전에는 회원가입 로그인만 나왔었는데 , 로그인 후에는 네비게이션 바가 바뀐 것을 알 수 있다.
오른쪽에 이제 어떤 사용자가 로그인 했는지 확인해주기 위해서 아래와 같은 코드를 작성해주었다.
해당 코드는 인증된 사용자의 정보를 가져와서 사용자의 유저명 및 계정의 권한이 무엇인지 보여주는 역할을 한다.
<div sec:authentication style="align-items: center; color:azure; " >유저명: [[${#authentication.getPrincipal()}]]</div>
<div sec:authentication style="align-items: center; color:bisque; " >계정 권한: [[${#authentication.getCredentials()}]]</div>
해당 화면을 출력하게 되면 아래와 같은 화면이 나오게 된다 오른쪽 상단에 유저명과 소유하고 있는 계정 권한이 나타나게 된다.
스프링 시큐리티를 이용한 로그인과 로그아웃 관련된 코드는 아래와 같다. 로그인 성공시 기본 화면으로 가게 되고 ,
로그아웃 하여도 기본화면으로 가게 설정해놓았다.
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http.csrf(csrf -> csrf.disable())
.authorizeHttpRequests(
authorize -> authorize
.anyRequest().permitAll()
).formLogin((login) -> login.loginPage("/login")
.usernameParameter("email")
.defaultSuccessUrl("/v1/popular"))
.logout(logout -> logout.logoutUrl("/v1/logout").logoutSuccessUrl("/v1/popular"));
http.authenticationProvider(authenticationProvider());
return http.build();
}
}'자바의 봄(Spring) > 프로젝트' 카테고리의 다른 글
| SpringBoot-Movie-Thymeleaf-Project - LocalDateTime 으로 시간 포맷 변경하기 (0) | 2024.04.06 |
|---|---|
| SpringBoot-Movie-Thymeleaf-Project - 7 게시글 작성하기 (0) | 2024.04.05 |
| SpringBoot-Movie-Thymeleaf-Project - 5 (0) | 2024.03.31 |
| SpringBoot-Movie-Thymeleaf-Project - 4 (0) | 2024.03.20 |
| SpringBoot-Movie-Thymeleaf-Project - 3 (0) | 2024.03.17 |
댓글