(8)블로그 만들기 Jquery 체크 박스 값 체크 하기, 쿠키 값 셋팅 해보기

쿠키

브라우저에 Response헤더에 쿠키가 있으면 브라우저의 쿠키에 저장 해주는 HTTP 프로토콜이 있다.

그럼 로그아웃을 하면 session을 하면 session 값은 날라가지만 브라우저를 종료 하지 않았으므로 쿠키에 정보가 남아있게된다.

쿠키 요청 및 응답

브라우저는 쿠키를 저장할 때 직접적으로 바로 접근이 불가능 하기 때문에 서버에 요청을 해야한다.

그럼 서버에서 Response의 Header에 전달 해주면 브라우저에서 쿠키에 저장 하게 된다. 

그럼 브라우저에서 쿠키 요청을 따로 해야하는가? 그건 아니다. 

브라우저는 항상 요청을 할 때 쿠키의 Jsession을 항상 가지고 간다 -> Default 값이다.

Jsession에 쿠키를 담아서 가는 것은 브라우저만 작동한다, 앱은 동작 하지 않기 때문에 따로 만들어 줘야 한다.

---

실습으로 확인

폼 태그 참고 https://www.w3schools.com/bootstrap5/bootstrap_forms.php

기본 셋팅 

아래 부분을 복사해 로그인 폼에 넣어준다.

아래와 같이 체크 박스란 하나 등장 

---

1. 체크 박스 전달되는 값이 무엇인지 확인(확인 하지 않으면 전달 값이 무엇인지 확인이 불가능하다.)

function login_Test(){
	let remember = $("#remember").prop("checked"); // 문법
	console.log(remember);
}

2. Remember me 를 누르고 로그인, 누르지 않고 로그인 했을때 결과 비교 boolean값이라는 것을 확인

3. 로그인 메서드에 전달 값 remember 추가

4. Controller의 로그인 부분 수정

로그인 할 때 이제 remember값이 하나 더 추가 되었기 때문에 똑같이 한개 더 추가 

5. 값 제대로 넘어오는지 확인 

 

True가 제대로 넘어온다.

6. 쿠키에 값 추가 

response의 헤더에 담기 때문에 response를 가져온다.

7. 개발자 모드로 확인

8. Cookies에 저장된 값 확인

9. 쿠키는 직접 set으로 넣어주면 이전에 있던 쿠키 값이 날라갈 수 있다. 객체를 새로 만들어서 더해 주는 방식을 사용하는 것이 좋다.

	@PostMapping("/login")
	public @ResponseBody CMRespDto<?> login(@RequestBody LoginDto loginDto,HttpServletResponse response ) {
		
		System.out.println("====================");
		System.out.println(loginDto.isRemember());
		System.out.println("====================");
		
		// 직접 쿠키에 set으로 담아주는것은 기존의 쿠키를 날려버릴 수 있기 때문에 객체를 하나 생성해 뒤에 더해주는 방법을 사용한다. 
		if(loginDto.isRemember()) {
			// 쿠키 생성 
			Cookie cookie = new Cookie("username",loginDto.getUsername());
			cookie.setMaxAge(60*60*24);// 60초,60분 , 24시간 = 1일
			response.addCookie(cookie);
			//response.setHeader("Set-Cookie","username="+loginDto.getUsername()+";HttpOnly");
		}
		else {
			//쿠키 삭제 
			Cookie cookie = new Cookie("username", null);
			cookie.setMaxAge(0);
			response.addCookie(cookie);
		}
		
		Users principal = usersService.로그인(loginDto);
		if(principal == null) {
			return new CMRespDto<>(-1, "로그인 실패", null);
		}
		session.setAttribute("principal", principal);
		return new CMRespDto<>(1, "로그인 성공", null);
	}