[SpringBoot] 로그인 시 아이디 기억하기(쿠키 적용)

Security 가 적용되어 있다 보니 Token 을 설정할지

DB에 저장해서 기억할지 고민하다 쿠키를 적용하였다 

 

html - 로그인 form

<form name="form" class="user" method="post" action="/login">
    <div th:if="${messageId} != null">
        <p th:text="${messageId}" class="alert alert-danger"></p>
    </div>
    <div class="form-group">
        <input type="text" class="form-control form-control-user"
               id="id" name="id" placeholder="ID">
    </div>
    <div th:if="${messagePwd} != null">
        <p th:text="${messagePwd}" class="alert alert-danger"></p>
    </div>
    <div class="form-group">
        <input type="password" class="form-control form-control-user"
               id="password" name="password" placeholder="Password">
    </div>
    <div class="form-group">
        <div class="custom-control custom-checkbox small">
            <input type="checkbox" class="custom-control-input" id="remember-me" name="remember-me">
            <label class="custom-control-label" for="remember-me">아이디 저장하기</label>
        </div>
    </div>
    <button id="loginBtn" type="button" class="btn btn-primary btn-user btn-block">Login</button>
</form>

Bootstrap 적용으로 input checkbox id 가 "remember-me" 로 되어 있다

편한 대로 지정하면 된다

 

 

 

javascript

<script type="text/javascript">
    $(document).ready(function (){
        // 로그인 페이지 진입 시 cookie 를 가져온다
        let cookieId = getCookie("key");

        // 저장된 cookie 가 있다면
        if(cookieId != ''){
            $("#id").val(cookieId);
            $("#remember-me").attr("checked" , true);
        }

        // 쿠키 불러오기
        function getCookie(key) {
            key = key + "=";
            let cookieData = document.cookie;
            let firstCookie = cookieData.indexOf(key);
            let cookieValue = "";

            if(firstCookie != -1){
                firstCookie += key.length;
                let endCookie = cookieData.indexOf(';', firstCookie);
                if(endCookie == -1){
                    endCookie = cookieData.length;
                    cookieValue = cookieData.substring(firstCookie , endCookie);
                }
            }
            return unescape(cookieValue);
        }

        // 쿠키 설정하기
        // key = cookie 불러올때 사용할 key 값 , value = 저장할 id 값 , day = 유지할 날짜
        function setCookie(key , value , day){
            let currentTime = new Date();
            currentTime.setDate(currentTime.getDate() + day);
            let cookieValue = escape(value) + ((day == null) ? "" : "; expires=" + currentTime.toGMTString());

            document.cookie = key + "=" + cookieValue;
        }

        // 쿠키 삭제하기
        function deleteCookie(key){
            let currentTime = new Date();
            // 현재시간에서 1일을 빼서 없는 시간으로 만든다
            currentTime.setDate(currentTime.getDate() - 1);
            document.cookie = key + "=" + "; expires=" + currentTime.toGMTString();
        }

        // button을 통한 submit에서 입력한 id를 cookie에 설정하고 form을 submit 하도록 변경
        $("#loginBtn").click(function (){
            if($("#remember-me").is(":checked")){
                setCookie("key" , $("#id").val() , 3);
            }else{
                deleteCookie("key");
            }
            document.form.submit();
        })

    });
</script>

 

 

 

 

TEST

아이디 저장 check box

 

 

 

 

체크 후 로그인을 시도하면 입력한 id를 cookie에 설정한다

입력한 패스워드가 틀렸거나 로그아웃하여 로그인 페이지로 다시 오게 되면

입력한 id가 세팅된다.