Spring Boot Board Project_03 아이디 저장(쿠키)

아이디 저장은 로그인할 때 아이디 저장 체크 박스가 체크돼있을 때 처리해줘야함

MemberController login()

기존에 있던 매개변수에 @RequestParam(value="saveId", required = false) String saveId) 추가

@RequestParam 추가 속성

value="saveId" : html 에서 input 태그 name 속성값
required=false : 필수 여부
-> 기본값이 true 라서 defaultValue 작성 안하고 체크박스에 체크 안하면 오류남

아이디 저장(Cookie)

1. 쿠키 객체 생성 (K:V)

import jakarta.servlet.http.Cookie;

Cookie cookie = new Cookie("saveId", loginMember.getMemberEmail());

-> saveId=user01@kh.or.kr

2. 클라이언트가 어떤 요청을 할 때 쿠키가 첨부될지 지정해줄 거

cookie.setPath() 쿠키를 담아줄 경로 지정

cookie.setPath("/");

"/" 는 최상위 주소 IP 또는 도메인 또는 localhost 뒤에 "/" 이게 붙는다는 뜻
--> 메인 페이지 + 그 하위 모든 주소

3. 만료 기간 지정 (체크박스 체크 유, 무)

checkbox

• 체크가 된 경우 : "on"
• 체크가 안된 경우 : null

			if(saveId != null) { // 아이디 저장 체크 시
				cookie.setMaxAge(60 * 60 * 24 * 30); // 30일 (초 단위로 지정)
			} else { // 체크 안 했을 때
				// 기존에 아이디 저장을 사용하다가 체크를 해제한 경우
				cookie.setMaxAge(0); // 0초 (클라이언트 쿠키 삭제)
			}

서버에서 쿠키 생성 및 만료기간 세팅해줌 쿠키는 브라우저가 관리하는 거
-> 브라우저로 보내줘야함

login() 매개변수 추가
HttpServletResponse resp

응답객체 resp
응답 객체에 쿠키 추가해서 클라이언트로 전달

resp.addCookie(cookie);

브라우저에서 아이디 저장 체크하고 로그인했을 때 Cookie 확인

브라우저에서 쿠키 오른쪽 마우스로 클릭하고 삭제 가능(보안 취약)

4. java 에서 얻어온 Cookie 를 js 에서 객체 형태로 바꿔주기

쿠키에서 key가 일치하는 value 얻어오기 함수
쿠키는 "K=V; K=V; K=V; ..." 형식

document.cookie 로 쿠키 담아주기

쿠키가 어떻게 담기고 어떻게 찍혀서 나오는지 TEST

const getCookie = () => {

    document.cookie = "test" + "=" + "유저일";

    const cookies = document.cookie;

    console.log(cookies);
}

getCookie();

쿠키 얻어와서 console 에 찍었을 때

얻어온 쿠키를 객체형태로 바꿔주기

main.js

const getCookie = () => {

    // document.cookie = "test" + "=" + "유저일";

    const cookies = document.cookie;

    // cookies 문자열을 배열 형태로 변환 saveId=user01@kh.or.kr;
    const cookieList = cookies.split("; ") // ["K=V", "K=V", "K=V"]
                        .map(el => el.split("="));

    // 배열.map(함수) : 배열의 각 요소를 이용해 함수 수행 후
    //                 결과 값으로 새로운 배열을 만들어서 반환                    
    // => ["K","V"]["K","V"],["K","V"]...
    // console.log(cookieList);

    // console.log(cookies);
    
}

배열을 객체 형태로 변환(다루기 쉽게)

    const obj = {}; // 비어있는 객체 선언

    // for 문 이용해서 obj 값 채워주기
    for(let i = 0 ; i < cookieList.length ; i++) {
        const k = cookieList[i][0]; // key 값 i 번째 인덱스의 0번 인덱스
        const v = cookieList[i][1]; // value  값
        obj[k] = v; // 객체에 추가
    }

    console.log(obj);

방금 만든 getCookie 라는 함수에서 매개변수로 key 를 전달하면 obj 객체에서 key 에 맞는 value 를 return 하게 만들어주기

main.js

const getCookie = (key) => {

    const cookies = document.cookie;
  
    const cookieList = cookies.split("; ").map(el => el.split("="));
  
    const obj = {};

    for(let i = 0 ; i < cookieList.length ; i++) {
        const k = cookieList[i][0];
        const v = cookieList[i][1];
        obj[k] = v;
    }
    return obj[key];
}

console.log(getCookie("saveId"));

출력 결과

쿠키에 저장되지 않은 값을 꺼내려고 했을 때

console.log(getCookie("aaa"));

출력 결과

5. getCookie() 이용해서 아이디 저장

memberEmail 요소 얻어오기

아이디가 loginForm 인 애의 자식 중 input 태그의 name 속성값이 memberEmail인 요소 얻어오기

const loginEmail = document.querySelector("#loginForm input[name='memberEmail']");

로그인 안된 상태인 경우에 수행해야함
로그인이 안된 상태에서만 input 창이 보임
아래 처리 안해주면 로그인이 된 상태에서 javaScript 에러남

if(loginEmail != null) {
    // 로그인 창에 이메일 입력부분이 화면에 있을 때

    // 쿠키 중에 key 값이 "saveId"인 요소의 value 얻어오기
    const saveId = getCookie("saveId"); // undefined 또는 이메일

    // 체크 박스 체크 된 경우 (saveId 값이 있을 경우)
    if(saveId != undefined) {
        loginEmail.value = saveId; // 쿠키에서 얻어온 값을 input 에 value 로 세팅

        // 아이디 저장 체크박스에 체크 해두기
        document.querySelector("input[name='saveId']").checked = true;
    }
}