내 정보보기를 클릭후 수정 삭제 기능 추가
수정 html (modifyForm.html)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/default_layout}">
<div layout:fragment="content">
<div class="container">
</br>
</br>
<h2>정보수정</h2>
</br>
</br>
<form action="/user/modify" method="post">
<input th:value="${loginUser.id}" type="hidden" class="form-control" id="id" name="id">
<div class="form-group">
<label for="loginId"> 아이디 : </label>
<input th:value="${loginUser.loginId}" type="text" class="form-control" id="loginId" name="loginId">
</div>
<div class="form-group">
<label for="password"> 비밀번호 : </label>
<input th:value="${loginUser.password}" type="password" class="form-control" id="password" name="password">
</div>
<div class="form-group">
<label for="name"> 이름 : </label>
<input th:value="${loginUser.name}" type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label for="phoneNumber"> 휴대폰 번호 : </label>
<input th:value="${loginUser.phoneNumber}" type="text" class="form-control" id="phoneNumber" name="phoneNumber">
</div>
<div class="form-group">
<label for="username"> 닉네임 : </label>
<input th:value="${loginUser.username}" type="text" class="form-control" id="username" name="username">
</div>
<div class="form-group">
<label for="createTime"> 가입날짜 : </label>
<input th:value="${loginUser.createTime}" type="text" class="form-control" id="createTime" name="createTime" readonly>
</div>
</br></br>
<button type="submit" class="btn btn-primary">정보수정</button>
</form>
</div>
</div>타임리프를 이용해서 해당정보를 보여주고 input 태그를 사용해서 입력할수 있게 설정
UserApiController
@PostMapping("/user/modify")
public String modify(@ModelAttribute UserModifyDto userModifyDto) {
userService.modify(userModifyDto);
return "redirect:/";
}modifyForm.html 에서 폼태그로 가져온 정보를 service로 넘겨주어서 저장
service
@Transactional
public void modify(UserModifyDto userModifyDto) {
User user = User.builder()
.id(userModifyDto.getId())
.loginId(userModifyDto.getLoginId())
.password(encoder.encode(userModifyDto.getPassword()))
.name(userModifyDto.getName())
.phoneNumber(userModifyDto.getPhoneNumber())
.username(userModifyDto.getUsername())
.role(RoleType.USER)
.createTime(userModifyDto.getCreateTime())
.build();
userRepository.save(user);
}완성후에 db에 정보는 변경이되지만 다시 내정보를 들어가게되면 로그인한 세션은 변경되지 않아서 값이 변경되지 않은 것으로 보임
이를 해결하기위해서 AuthenticationManager 를 사용해서 변경된 정보를 세션에 저장
SecurityConfig
@Bean
AuthenticationManager authenticationManager(AuthenticationConfiguration authenticationConfiguration) throws Exception {
return authenticationConfiguration.getAuthenticationManager();
}AuthenticationManager를 사용하기위해서 빈으로 등록
UserApiController
@PostMapping("/user/modify")
public String modify(@ModelAttribute UserModifyDto userModifyDto) {
userService.modify(userModifyDto);
Authentication authenticate = authenticationManager.authenticate(
new UsernamePasswordAuthenticationToken(userModifyDto.getLoginId(), userModifyDto.getPassword()));
SecurityContextHolder.getContext().setAuthentication(authenticate);
return "redirect:/";
}Authentication 객체를 만들어주고 입력받은 정보의 아이디와 비밀번호를 넘겨주어서 Token을 만들어 주고 넘겨준다.
SecurityContextHoler의 context를 불러와서 Authentication을 새로만든 Authentication으로 저장해준다.
Security 로그인, 수정하기 설명
해결
JQuery사용해서 삭제버튼 클릭시 경고창
Jquery란, HTML의 요소들을 조작하는 Javascript로 미리 작성해둔 Library
Javascript로도 모든 기능을 구현할 수 있지만 코드 복잡성 및 브라우저 간 호환성 등의 이슈로 jQeury를 import해서 사용하는 것을 권장.
<script>
$(document).ready(function(){
$("#btn-danger").click(function(){
alert("삭제되었습니다.");
});
});
</script>이렇게 경고를 넣어줄수있지만 경고창에 삭제하시겠습니까 라는 말에 취소를 누르면 돌아갈수있게 설정하고싶다.
<script>
$(document).ready(function(){
$("#btn-danger").click(function(){
if(confirm("회원정보를 삭제하시겠습니까?")){
location.href='/user/delete';
}
});
});
</script>
멋있는 사람 - 일단 하자