Java, IntelliJ/Spring
[Spring]Thymeleaf Js내부에서 사용하기, 로그인 여부에 따라 보이기
반응형
타임리프(Thymeleaf)
: 스프링부트 html 조작가능한 프레임워크이다.
JSP는 자바소스(.java)에서 바이트코드(.class)로 변환하는 과정을 거친다.
그러나 타임리프는 그런 과정 없이 순수한 html에 태그를 추가하여 html을 조작한다.
사용 설정하기
- dependencies 설정하기
build.gradle의 dependencied{ } 안에 다음 구문 붙여넣기
dependencies {
// Thymeleaf (뷰 템플릿 엔진)
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
- 사용할 html 맨 위에 아래 내용 추가
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">1. html <script> JS 에 타임리프 정보 가져다 쓰는법
Javascript 의 script 에 다음과 같이 입력
<script th:inline="javascript">
script 내부에서 사용 할 수 있습니다.
</script>다음과 같이 사용가능
Controller.java
: userDetails.getUsername() 정보를 -> username 으로 전달
model.addAttribute로 이동된 페이지에서 타임리프로 불러낼 수 있다.
@Controller
public class PageController {
// 홈으로 가는 controller : addAttribute 로 username 을 전달 해주고 있다.
@GetMapping("/detail.html")
public String detail(Model model, @AuthenticationPrincipal UserDetailsImpl userDetails) {
if (userDetails != null) {
model.addAttribute("username", userDetails.getUsername()); <-- 이 부분
}
return "detail";
}
detail.html
script 내부에서 아래와 같이 호출한다.
[[${username}]] 형태로 호출한다.
<script th:inline="javascript">
function test() {
let name = [[${username}]];
console.log(name)
...
</script>
>> test(test라는 유저가 로그인한 경우 'test'가 log에 찍힘)
2. html 특정 문구를 로그인 했을 때 보여지고, 안하면 안보이게 하기
thymeleaf 와 spring security를 사용하여 사용자의 로그인 여부에 따라 작동 하기
사용 설정하기
- dependencies 설정하기
build.gradle의 dependencied{ } 안에 다음 구문 붙여넣기
// Thymeleaf (뷰 템플릿 엔진)
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
// Thymeleaf 에서 springsecurity 의존성 설정
implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity5'- html 맨 위에 다음과 같이 작성
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.w3.org/1999/xhtml">
사용법
html 내부에서 원하는 부분의 < > 괄호 안쪽에 다음과 같이 작성
- sec:authorize="isAuthenticated()" : 로그인된 사용자에게만 보여짐
- sec:authorize="!isAuthenticated()" : 로그인안된 사용자에게만 보여짐
! 의 유무에 따라 인증이 된 사용자만 보여지게 할 수 있다.
<a sec:authorize="isAuthenticated()" id="logout-text" href="/user/logout">
로그아웃
</a><a sec:authorize="!isAuthenticated()" id="login-text" href="/user/login">
로그인
</a>
<a sec:authorize="!isAuthenticated()" id="signup-text" href="/user/signup">
회원가입
</a>
사용법 모음
//ROLE_ADMIN 권한이 있는 경우만 표시됨
<li sec:authorize="hasRole('ROLE_ADMIN')"><a th:href="@{/admin}">관리자 페이지</a></li>
//ROLE_USER 권한이 있는 경우만 표시됨
<li sec:authorize="hasRole('ROLE_USER')"><a th:href="@{/books}">책 목록</a></li>
//로그인이 되지 않은 경우 표시
<li sec:authorize="!isAuthenticated()"><a th:href="@{/users}">회원가입</a></li>
//로그인 된 경우의 username을 출력
<li sec:authorize="isAuthenticated()"><span sec:authentication="principal.username"></span></li>
//변수처럼 사용하고 싶은 경우
<a th:href="@{'/users/'+ ${#authentication.principal.id}}">마이페이지</a>출처 https://siyoon210.tistory.com/102
반응형
'Java, IntelliJ > Spring' 카테고리의 다른 글
| Spring/ SpringBoot 개념 정리 (0) | 2021.07.19 |
|---|---|
| JWT토큰이란, 장단점, 구현 (1) | 2021.07.14 |
| Spring_CRUD할 수 있는 API 연습 (0) | 2021.06.27 |
| Java Spring_API-GET/POST/PUT/DELETE (0) | 2021.06.27 |
| Java/intelliJ Lombok, DTO 사용법 (2) | 2021.06.26 |
댓글