본문 바로가기
교육 정리/입사교육

boardAjax 만들기 2 (로그인 구현, 경로수정)

by Jint 2021. 8. 10.

@ boardAjax 만들기 2 (로그인 구현, 경로수정)

1. 로그인 구현
https://devmoony.tistory.com/47 - 참고(Ajax로그인 예시)

- UserSession
/**
 * 세션에 올릴 데이터
 * @author JINSUNG SONG
 *
 */
public class UserSession {

private String user_id;
private String pwd;


public String getUser_id() {
return user_id;
}
public void setUser_id(String user_id) {
this.user_id = user_id;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}

}

- Login_SQL.xml
<!-- select 아이디와 비밀번호 확인 -->
<select id="userPwdCheck" resultType="int" parameterType="map">
select count(*)
from USER_TB
where user_id = #{user_id} AND pwd = #{pwd}
</select>

- LoginService.java
public interface LoginService {

/**
 * 로그인 아이디와 비밀번호 확인
 * @param loginMap
 * @return 1(아이디와 비밀번호 일치O) / 0(아이디와 비밀번호 일치X)
 */
public int userPwdCheck(Map<String,String> loginMap);

}

- LoginDAO.java
@Repository("loginDAO")
public class LoginDAO {

@Autowired
SqlSession sqlSession;


/**
 * 로그인 아이디와 비밀번호 확인
 * @param loginMap
 * @return 1(아이디와 비밀번호 일치O) / 0(아이디와 비밀번호 일치X)
 */
public int userPwdCheck(Map<String,String> loginMap) {

return sqlSession.selectOne("Login.userPwdCheck", loginMap);

}

}

- LoginServiceImpl.java
@Service("loginService")
public class LoginServiceImpl implements LoginService {

@Resource(name="loginDAO")
private LoginDAO loginDAO;


//로그인 아이디와 비밀번호 확인
@Override
public int userPwdCheck(Map<String, String> loginMap) {

return loginDAO.userPwdCheck(loginMap);

}

}

- Login Controller.java
@Controller
public class LoginController {

@Resource(name = "jsonView")
private MappingJackson2JsonView jsonView;

@Resource(name="commonService")
private CommonService commonService;

@Resource(name="loginService")
private LoginService loginService;

/**
 * 로그인 창 이동
 * @param request
 * @return
 */
@RequestMapping(value="/login/login.do")
public String loginview(HttpServletRequest request) {

http://localhost:8080/boardAjax/login/login.do
return "/login/login";

}

/**
 * 로그인 아이디와 비밀번호 확인
 * @param request
 * @param loginMap
 * @return 1(아이디와 비밀번호 일치O) / 0(아이디와 비밀번호 일치X)
 * @throws Exception
 */
@RequestMapping(value="/login/idCkedAjax.do")
@ResponseBody
public int idCkedAjax(HttpServletRequest request,@RequestBody Map<String,String> loginMap) throws Exception {

return loginService.userPwdCheck(loginMap);

}

/**
 * 실제 로그인 작업(세션에 올리기)
 * @param request
 * @return redirect:/account/accountList.jsp
 */
@RequestMapping(value="/login/loginPro.do")
public ModelAndView loginPro(HttpServletRequest request) {

String user_id = request.getParameter("user_id");
String pwd = request.getParameter("pwd");

HttpSession session = request.getSession();
UserSession userSession = new UserSession();

userSession.setUser_id(user_id);
userSession.setPwd(pwd);

session.setAttribute("userSession", userSession);
session.setMaxInactiveInterval(60*30); //30분

ModelAndView mav = new ModelAndView();

mav.setViewName("redirect:/account/accountList.do");

return mav;

}

/**
 * 로그아웃
 * @param request
 * @return redirect:/login/login.jsp
 */
@RequestMapping(value="/account/logout.do")
public ModelAndView logout(HttpServletRequest request) {

HttpSession session = request.getSession();
session.removeAttribute("userSession");

ModelAndView mav = new ModelAndView();

mav.setViewName("redirect:/login/login.do");

return mav;

}

}// end of class

- login.jsp
<form id="sendForm">

<input type="hidden" id="platform" name="platform" value="">
<div class="container col-md-offset-2 col-sm-6" style="margin-top: 100px;">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="user_id" type="text" class="form-control valiChk" name="user_id" placeholder="id" title="ID">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="pwd" type="password" class="form-control valiChk" name="pwd" placeholder="Password" title="Password">
</div>
<br />
<br>
<div class="col-md-offset-4">
<button type="button" class="btn btn-primary" id="pwdcked">로그인</button>
<button type="button" class="btn btn-warning" onclick="location.href='/login/login.do'">취소</button>
<button type="button" class="btn btn-info" onclick="location.href='/user/userInsert.do'">회원가입</button>
</div>
</div>

</form>

<script type="text/javascript">

$(document).ready(function(){

$("#pwdcked").click(function() {

var user_id = $('#user_id').val();
var pwd = $('#pwd').val();

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

$.ajax({
type : "POST",
url : "./idCkedAjax.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 = "./loginPro.do?user_id=" + user_id + "&pwd=" + pwd;

}

},
error : function() {

alert("에러입니다!");
return false;

}

});

});

});
</script>

- type_2_header.jsp
<!-- 로그인한 아이디와 로그아웃 구현 -->
<ul class="nav navbar-nav ">
<li class="dropdown active"><span><font size="2px" color="white" >   <br /> ${sessionScope.userSession.user_id} 님 로그인 </font></span></li>
<li class="active"><a href="./logout.do"><span class="glyphicon glyphicon-log-in"></span> LogOut</a></li>
</ul>

2. 경로 수정
- userInsert.jsp
<button type="button" class="btn btn-danger" onclick="location.href='../login/login.do'">취소</button>

- login.jsp
<button type="button" class="btn btn-info" onclick="location.href='../user/userInsert.do'">회원가입</button>

댓글