@3/17/2023
•
회원가입
•
로그인
◦
비밀번호 암호화
◦
세션(jwt 등)
•
로그인 화면에서 로그인, 회원가입 버튼 숨김
로그인 화면 제작
•
컨트롤러
package dev.gyuray.forum.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/users")
public class UserController {
@GetMapping("/login")
public String createForm() {
return "users/loginForm";
}
}
Java
복사
•
뷰
<section>
<div class="container login">
<div class="row d-flex flex-column justify-content-between align-items-center gap-4">
<h4 class="h1 text-center">로그인</h4>
<div class="input-group input-group-lg p-0">
<span class="input-group-text w-25 fs-6">아이디</span>
<input type="text" class="form-control" aria-label="Sizing example input">
</div>
<div class="input-group input-group-lg p-0">
<span class="input-group-text w-25 fs-6">비밀번호</span>
<input type="text" class="form-control" aria-label="Sizing example input">
</div>
<button type="button" class="btn btn-primary btn-lg">로그인</button>
<button type="button" class="btn btn-outline-secondary btn-lg">회원가입</button>
</div>
</div>
</section>
Java
복사
로그인 화면에서 헤더(navbar) 로그인 버튼 숨기기
•
자바스크립트 사용
let headerBtns = document.querySelector('header').getElementsByTagName('a');
for (let a of headerBtns) {
if (a.type === 'button') {
a.style.display = 'none';
}
}
Java
복사
◦
아래처럼 버튼이 잠깐 보여서 사용 불가
◦
스크립트를 위로 올리면 되겠지만 과하게 복잡해짐
▪
레이아웃 fragment에 script 파라미터를 추가하고, 해당 레이아웃을 사용하는 모든 뷰 페이지를 모두 수정해야 함
•
타임리프 unless 사용
◦
스프링 부트 3.0부터는 보안상 이유로 #request 객체를 지원하지 않는다고 함. 나는 스프링 부트 2.x 버전이지만 사용하지 않기로 함
▪
대신 컨트롤러에서 직접 model에 해당 값을 넣어주고 thymleaf의 unless를 이용하기로 함
◦
컨트롤러
@GetMapping("/login")
public String createForm(Model model) {
model.addAttribute("hideLoginButtons", "true");
return "users/loginForm";
}
Java
복사
◦
헤더 버튼
<a th:unless="${hideLoginButtons}" type="button" class="btn btn-outline-primary ms-auto" href="/users/login">로그인</a>
<a th:unless="${hideLoginButtons}" type="button" class="btn btn-primary ms-2" href="#">회원가입</a>
Java
복사
▪
해석하면 ‘hideLoginButtons값이 존재해서 true가 아니면’ 해당 엘리먼트 렌더링
