반응형
[여기에 적은 거는 강의 내용을 다 적은게 아니라서 강의자료 보면서 이 게시글 참고하자.]
[스프링 심화 강의 2주차 9강 로그인, 로그아웃 기능 구현]
- springCore 프로젝트에서 실습
★ 로그인, 로그아웃 처리 과정 이해
- 회원 로그인 / 로그아웃 UI 처리
- 로그인 성공 시 페이지
- "로그아웃" 버튼 클릭 시
- "GET /user/logout" 로 API 설계 했는데, "POST /user/logout" 으로 처리 필요 ★
- 이유: CSRF protection 이 기본적으로 enable 되어 있기 때문
- CSRF protection 을 disable 하면 GET /user/logout 으로도 사용 가능
- "GET /user/logout" 로 API 설계 했는데, "POST /user/logout" 으로 처리 필요 ★
- 로그인 성공한 회원의 username 표시
- UI 에서 username 대신 nickname (별칭), name (회원 본명) 을 표시해 주기도 함
- Controller 에서 "로그인된 회원 정보" 사용 가능
- Spring Security 가 "로그인된 회원 정보"를 Controller 에게 전달해 줌
- Controller 에서 "로그인된 회원 정보 (UserDetailsImpl)" 사용하는 방법
@Controller
public class TestController {
@GetMapping("/")
public String test(@AuthenticationPrincipal UserDetailsImpl userDetails) {
}
}
- 로그인한 사용자의 username 적용 구현
- Controller 에서 model 에 'username' 전달
- [코드스니펫] controller > HomeController
- Controller 에서 model 에 'username' 전달
import com.sparta.springcore.security.UserDetailsImpl;
import org.springframework.security.core.annotation.AuthenticationPrincipal;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/")
public String home(Model model, @AuthenticationPrincipal UserDetailsImpl userDetails) {
model.addAttribute("username", userDetails.getUsername());
return "index";
}
}
2. 타임리프 적용 필요
- index.html 파일을 static 폴더 → templates 폴더로 이동
- [코드스니펫] resources > templates > index.html
<div id="header-title-login-user">
<span th:text="${username}"></span> 님의
</div>
[index.html 전체코드]
더보기
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta property="og:title" content="00만의 셀렉샵">
<meta property="og:description" content="관심상품을 선택하고, 최저가 알림을 확인해보세요!">
<meta property="og:image" content="images/og_selectshop.png">
<link href="https://fonts.googleapis.com/css2?family=family=Nanum+Gothic&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="basic.js"></script>
<title>나만의 셀렉샵</title>
</head>
<body>
<div class="header" style="position:relative;">
<div id="header-title-login-user">
<span th:text="${username}"></span> 님의
</div>
<div id="header-title-select-shop">
Select Shop
</div>
<form id="my_form" method="post" action="/user/logout">
<a id="logout-text" href="javascript:{}" onclick="document.getElementById('my_form').submit();">로그아웃</a>
</form>
</div>
<div class="nav">
<div class="nav-see active">
모아보기
</div>
<div class="nav-search">
탐색하기
</div>
</div>
<div id="see-area">
<div id="product-container">
</div>
</div>
<div id="search-area">
<div>
<input type="text" id="query">
<!-- <img src="images/icon-search.png" alt="">-->
</div>
<div id="search-result-box">
</div>
<div id="container" class="popup-container">
<div class="popup">
<button id="close" class="close">
X
</button>
<h1>⏰최저가 설정하기</h1>
<p>최저가를 설정해두면 선택하신 상품의 최저가가 떴을 때<br/> 표시해드려요!</p>
<div>
<input type="text" id="myprice" placeholder="200,000">원
</div>
<button class="cta" onclick="setMyprice()">설정하기</button>
</div>
</div>
</div>
</body>
</html>반응형
'JAVA' 카테고리의 다른 글
| [JAVA_Study] 스터디 1일차 (변수, 상수, 배열, 삼항연산자) (0) | 2022.06.20 |
|---|---|
| [JAVA/SpringBoot] 회원별 상품 등록 및 조회 (2-10) (0) | 2022.05.29 |
| [JAVA/SpringBoot] 로그인, 로그아웃 기능 구현 (2-9) 두번째 (0) | 2022.05.29 |
| [JAVA/SpringBoot] 로그인, 로그아웃 기능 구현 (2-9) 첫번째 (0) | 2022.05.29 |
| [JAVA/SpringBoot] 패스워드 암호화 구현 (2-8) (0) | 2022.05.29 |