Java, IntelliJ/Spring

[Spring]Thymeleaf Js내부에서 사용하기, 로그인 여부에 따라 보이기

고로케 2021. 7. 6.
반응형

타임리프(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

댓글