[Spring] Ajax 활용하여 로그인 처리 (JSON데이터, 로그인 Session 관리)

Ajax를 활용한 로그인 처리 예제

 

1. 로그인 화면 - login.html

<h2>moony blog <strong>로그인</strong></h2>
<input title="아이디" type="text" name="userId" placeholder="아이디" />
<input title="비밀번호" type="password" name="pwd" placeholder="비밀번호" />

<div> class="save_id"><input type="checkbox" id="save_id"/><label for="save_id">아이디 저장</label></div>
<button type="button" class="btn" onclick="f_loginCheck();>LOGIN</button>

form태그로 submit해서 보내는 방식이 아닌 로그인버튼을 클릭하면 onclick이벤트로 f_loginCheck() 함수가 호출됩니다.

 

 

2. 호출되는 로그인체크 function - login.js

function f_loginCheck(){
    var userId = $('input[name="userId"]).val();
    var pwd = $('input[name="pwd"]).val();
    var saveIdCheck = $('#save_id:checked').val();

    /**
    * 아래는 localStorage를 활용한 아이디 기억을 사용하기 위함입니다.
    * 아이디 저장 checkbox가 선택된 상태로 로그인 버튼을 클릭하면 
    * 다음 login 페이지로 접속할 시 document.ready시점에 localStorage.getItem("saveId")
    * 값이 '', null, 'N' 중에 없을 시에만 id input란에 값을 넣어주면 됩니다.
    */
    if(saveIdCheck == 'on'){
        localStorage.setItem("saveId", userId);
    } else{
        localStorage.setItem("saveId", 'N');    
    }

    var loginData = {"userId":userId, "pwd":pwd};

    $.ajax({
        type = "POST",
        url = "/moonyBlog/loginCheck.do",
        contentType : "application/json",
        data : JSON.stringify(loginData),
        success : function(result){
            if(result == 0){
                alert("아이디와 비밀번호를 다시 확인 후 시도해 주세요.");
                return false;
            } else if(result == 9){
                alert("통신 오류");
                return false;  
            } else {
                // 로그인 성공 시
                window.location.href = "/moonyBlog/main.do";
            }
        },
        error : function(jqXHR, status, error){
            alert("알 수 없는 에러 [ " + error + " ]"); 
        }
    });


    
}

로그인 시 입력한 id, pw, 아이디저장 체크박스 value값을 JSON형식으로 POST방식으로 보냅니다.

 

 

3. Java Controller - LoginController.java

/**
 * 로그인 처리 (id & pw 데이터 일치 확인 처리)
 * 로그인 성공시 session 처리
 */
@RequestMapping(value="/loginCheck.do", method=RequestMethod.POST)
public @ResponseBody Object loginCheck(@RequestBody Map<String, String> loginMap, HttpServletRequest request, Model model) throws Exception{

    HttpSession session = request.getSession();

    // 기존에 user라는 session 값이 존재하면 remove
    if(session.getAttribute("user") != null){
        session.removeAttribute("user");
    }

    try{
        UserDTO userDto = loginDao.loginUserCheck(loginMap);

        if(userDto != null) {
            session.setAttribute("user", userDto);

            return userDto;
        } else{
            return 0;
        }
    } catch(IOException e){
        return 9;
    }

}

@RequestBody로 명시하여 js단에서 보낸 JSON데이터를 Java에서 Map<String, String> 형태로 받아서 처리한다.

 

 

이후 success로 들어간 result(return값) 값으로 처리한다.

 

페이지 이동 처리 및 아이디 매치오류 팝업 등 처리