🔥 #16 회원정보 수정 및 Session 등록 방법

회원정보는 현재 로그인된 유저, 즉 세션에서 들고오면 된다. 헤더에 시큐리티 태그로 "pricipal" 변수에 현재 세션 정보 넣어 놓았기 때문에 이 변수 쓰면 된다. (select 할 필요 X)

< updateForm.jsp >

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<%@ include file="../layout/header.jsp"%>

<div class="container">

    <form>
        <input type="hidden" id="id" value="${principal.user.id}" />
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" value="${principal.user.username}" class="form-control" placeholder="Enter username" id="username" readonly>
        </div>

        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" placeholder="Enter password" id="password">
        </div>

        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" value="${principal.user.email}" class="form-control" placeholder="Enter email" id="email">
        </div>
    </form>
    <button id="btn-update" class="btn btn-primary">회원수정하기</button>

</div>

<script src="/js/user.js"></script>
<%@ include file="../layout/footer.jsp"%>

상단바 "회원정보" 버튼에 /user/updateForm url을 걸어둔다. 이 버튼을 누르면 해당 url로 이동할 것이다.

id는 추후에 DB에서 select 하기 위해 hidden으로 만들어주고, Username은 변경할 수 없도록 input에 readonly 속성을 넣는다.

< UserController >

@GetMapping("/user/updateForm")
public String updateForm() {

    return "user/updateForm";
}

id="btn-update"인 회원 수정 버튼을 누르면 user.js가 작동한다.

< user.js >

.
.
.
	$("#btn-update").on("click", ()=>{ // function(){} 대신 ()=>{} 를 쓴 이유 : this를 바인딩하기 위해서
            this.update();
    });
.
.
.
update: function () {
        let data = {
            id: $("#id").val(),
          	username: $("#username").val(),
            password: $("#password").val(),
            email: $("#email").val()
        };

        $.ajax({
            type: "PUT",
            url: "/user",
            data: JSON.stringify(data), // http body 데이터
            contentType: "application/json; charset=utf-8", // body 데이터가 어떤 타입인지 (MIME)
            dataType: "json" // 요청을 서버로 해서 응답이 왔을 때 기본적으로 모든 것이 String(문자열), 만약 생긴게 json이라면 javascript 오브젝트로 변경
        }).done(function (resp) {
            // 결과가 정상이면 done 실행
            alert("회원수정이 완료되었습니다.");
            //console.log(resp);
            location.href = "/";
        }).fail(function (error) {
            // 실패하면 fail 실행
            alert("회원수정이 실패하였습니다.");
            alert(JSON.stringify(error));
        });
    }
.
.
.

수정이기 때문에 타입은 PUT 으로 하여 /user에 데이터를 넘긴다. (json 타입으로)

< UserApiController >

@PutMapping("/user")
public ResponseDto<Integer> update(@RequestBody User user) { // id, password, email
    userService.회원수정(user);
    
    return new ResponseDto<Integer>(HttpStatus.OK.value(), 1); // 통신 성공 : 200, 실패 : 500 // 자바 오브젝트를 JSON으로 변환해서 리턴 (Jackson)
}

< UserService >

@Transactional // 전체가 성공해야 commit, 실패하면 rollback
public void 회원수정(User user) {
    // 수정시에는 JPA 영속성 컨텍스트에 User 객체를 영속화 시키고, 영속화된 User 객체를 수정하면 된다.
    // select 하여 DB에서 가져와 영속화를 한다.
    // 영속화된 객체를 변경하면 자동으로 변경감지되어 (더티체킹) DB에 update 된다. (flush)
    User persistance = userRepository.findById(user.getId()) // select 하여 영속화
            .orElseThrow(()->{
                return new IllegalArgumentException("회원이 존재하지 않습니다. id : "+user.getId());
            });

    String rawPassword = user.getPassword();
    String encPassword = encoder.encode(rawPassword);

    persistance.setPassword(encPassword); // 영속화 되어 있는 객체를 변경
    persistance.setEmail(user.getEmail());

    // 회원 수정 함수 종료 시(Service 종료 시) -> 트랜잭션 종료 -> commit(영구적)이 자동으로 된다.
    // 영속화된 persistance 객체의 변화가 감지되면 더티체킹 되어 자동으로 DB에 update문을 날려준다.
}

서비스에는 트랜잭션을 건다.
그러면 DB에서 select한 객체를 영속성 컨텍스트에 영속화 시키고, 영속화 되어 있는 객체를 변경하면 된다.
그러면 트랜잭션이 끝난 후 다시 말해서 Service가 끝난 후에 더티체킹을 하여 DB에 변경된 데이터가 flush 될 것이다.

---

현재 상태는 회원수정을 하면 DB 데이터는 바뀌지만, 세션은 바뀌지 않았다.
다시 회원수정을 들어가면 바꾸기 전 데이터가 나타날 것이다.
(물론 데이터는 DB에 바뀌어 있지만!!)

따라서 회원수정을 하면 세션 값(현재 로그인 되어 있는)도 동시에, 즉시(?) 바뀌어야 한다.
세션 안의 시큐리티 컨텍스트에 Authentication 객체를 강제로 넣어주는 것이다. (시큐리티 컨텍스는 Authentication만 가능)

세션 등록

< SecurityConfig >

@Bean
@Override
public AuthenticationManager authenticationManagerBean() throws Exception {
    return super.authenticationManagerBean();
}

AuthenticationManager 가 Authentication 객체를 생성하기 때문에 이 Manager를 사용하기 위해 빈으로 등록해야 한다.

< UserApiController >

.
.
.

	// 세션 등록 (DB가 변경된 후의 정보를 가져와야 하므로 Service가 끝난 후(=트랜잭션 끝난 후)에 이루어져야 한다. 따라서 Controller에서 진행
    Authentication authentication = authenticationManager.authenticate(new UsernamePasswordAuthenticationToken(user.getUsername(), user.getPassword()));
    SecurityContextHolder.getContext().setAuthentication(authentication);
.
.
.

Authentication 객체를 만들어서 session에 저장해야 한다!!

Service가 끝나고 트랜잭션이 끝나고 DB에 변경이 반영된 후에 이루어져야 하기 때문에 UserApiController에서 진행한다.

흐름은 위처럼 된다.

🎈 Session 등록 정리

1. 세션을 등록하기 위해서는 HttpSession의 SecurityContextHolder - SecurityContext 안에 Authentication 객체를 등록해야 한다.

2. 내가 강제로 Authentication 객체를 만들 수 없으므로 AuthenticationManager 를 통해 Authentication 객체를 생성해야 한다.

3. AuthenticationManager 객체를 사용하기 위해 SecurityConfig에 생성 후 빈으로 등록하여, 스프링이 IoC로 관리하게 한다.

4. AuthenticationManager 를 활용하여, 수정된(Service에서 수정되고 DB 변경까지 완료된) User 객체의 username 과 password로 새로운 토큰을 만들어서 Authentication 객체를 생성한다.

5. Authentication 객체를 만들 때 필요한 조건은 DB에 해당 유저가 있어야 한다.

6. 따라서 username을 UserDetailService에 던지고, UserDetailService가 DB에 접근하여 확인한다. 이걸 토대로 비밀번호도 확인해야 한다.

7. AuthenticationManager 가 이제 password를 BCrypt로 인코딩하여 DB에 다시 확인한 후, 맞으면 Authentication 객체를 생성한다.

8. HttpSession의 SecurityContextHolder 안에 SecurityContext 안에 있는 Authentication 객체를 우리가 만든 새로운 Authentication으로 덮는다. 즉, 기존의 세션 값을 새로 만든 값(새로 만들어진 Authentication 객체)으로 변경한다.

9. 최종적으로 시큐리티 컨텍스트에 넣어진 것이다.

참고