mini_project/회원가입, 로그인 구현하기

로그인/로그아웃 구현하기_spring boot, jsp, javascript, mybatis 사용

개발자 배찌 2021. 6. 9. 16:20
728x90

/member/login

/member/doLogin

/member/doLogout

 

로그인 구현하기

MemberController.java

@Controller
public class MemberController {
     @Autowired
     private MemberService memberService;
     
     @RequestMapping("member/login")
     String showlogin(){
         return "member/login";
     }

     @RequestMapping("member/doLogin")
     String doLogin(HttpSession session, @RequestParam Map<String, Object> param, Model model) {
         Map<String, Object> rs = memberService.checkLoginAvailable(param);  //로그인 가능한지 체크

         String resultCode = (String) rs.get("resultCode");
         String msg= (String) rs.get("msg");

         if ( resultCode.startsWith("S-") {
             int loginedMemberId = (int)rs.getId("id");
             session.setAttribute("loginedMemberId", loginedMemberId ); 
             msg = "로그인 되었습니다";

             String redirectUrl = "/article/list";  //로그인 후에 게시판 리스트화면으로 redirect

             model.addAttribute("jsAlertMsg", msg);
             model.addAttribute("jsLocationReplaceUrl", redirectUrl);
         } else {
             model.addAttribute("jsAlertMsg", rs.get("msg"));
             model.addAttribute("jsHistoryBack", true);
         }
         return "redirect";
     }
}

src/main/webapp/WEB-INF/jsp/member/login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="pageTitle" value="회원 로그인" />
<%@ include file="../part/head.jspf"%>
<script>
function submitLoginForm(form) {
     form.loginId.value = form.loginId.value.trim();
     if (form.loginId.value.length == 0) {
          alert('로그인 아이디를 입력해주세요.');
          form.loginId.focus();
          return false;
      }
      if (form.loginId.value.length < 4) {
         alert('로그인 아이디를 4자 이상 입력해주세요.');
         form.loginId.focus();
          return false;
      }
      if (isAlphaNumeric(form.loginId.value) == false) {
          alert('로그인 아이디는 영문자 소문자와 숫자만 사용할 수 있습니다.');
         form.loginId.focus();
          return false;
     }
      form.loginId.value = form.loginId.value.toLowerCase();
     form.loginPw.value = form.loginPw.value.trim();
      if (form.loginPw.value.length == 0) {
         alert('비밀번호를 입력해주세요.');
         form.loginPw.focus();
         return false;
      }
      form.submit();
     }
</script>
<div class="member-join-box con">
      <form onsubmit="submitLoginForm(this); return false;" action="/member/doLogin" method="POST" class="table-box form form-type-1">
         <table>
              <colgroup>
                   <col width="100" />
             </colgroup>
             <tbody>
                 <tr>
                     <th>아이디</th>
                      <td>
                         <input maxlength="30" name="loginId" autofocus="autofocus" placeholder="로그인 아이디를 입력해주세요." type="text" />
                     </td>
                  </tr>
                  <tr>
                      <th>비밀번호</th>
                      <td>
                         <input maxlength="30" name="loginPw" placeholder="비밀번호를 입력해주세요." type="password" />
                     </td>
                  </tr>
                  <tr>
                      <th>로그인</th>
                      <td>
                         <input type="submit" value="로그인" />
                          <input onclick="history.back();" type="button" value="취소" />
                     </td>
                  </tr>
              </tbody>
          </table>
      </form>
</div>

<%@ include file="../part/foot.jspf"%>

src/main/webapp/WEB-INF/jsp/part/head.jspf

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="siteName" value="[${logoText}]" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>${siteName}-${pageTitle}</title>
<link rel="stylesheet" href="/css/common.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/common.js"></script>
</head>

<body>
<h1 class="title-box con">${pageTitle}</h1>
<c:if test="${isLogined}">
<div class="con welcome-msg-box">${loginedMember.name}님환영합니다.</div>
</c:if>
<div class="menu-box con">
<a href="/article/list">글 리스트</a>
<c:if test="${isLogined}">
<a href="/article/write">글쓰기</a>
</c:if>
<c:if test="${isLogined == false}">
<a href="/member/join">회원가입</a>
<a href="/member/login">로그인</a>
</c:if>
<c:if test="${isLogined}">
<a href="/member/doLogout">로그아웃</a>
</c:if>
</div>
</body>

 

BeforeActionInterceptor.java

@Component("beforeActionInterceptor")
@Log
public class BeforeActionInterceptor implements HandlerInterceptor {
      
     @Autowired
     private MemberService memberService;

     @Autowired
     private MemberService memberService;
     
     @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

     request.setAttribute("logoTest", logoText );
     HttpSession session = request.getSession();

     Integer loginedMemberId = (Integer) session.getAttribute("loginedMemberId");

     if (loginedMemberId == null) {
         loginedMemberId = 0;
     } else { //"ㅇㅇㅇ님 환영합니다" 에서 memberId가 아닌 memberName을 얻기위한 코드
         Member member = memberService.getMemberById(loginedMemberId);  
         request.setAttribute("loginedMember", member);
      }

      request.setAttribute("loginedMemberId", loginedMemberId);
      request.setAttribute("isLogined", loginedMemberId != 0);

      return HandlerInterceptor.super.preHandle(request, response, handler);
     }
}

 

MemberService.java

public interface MemberService { 
..........
     Map<String, Object> checkLoginAvailable(Map<String, Object> param);
}

 

MemberServiceImpl.java

@Service
pulic class memberServiceImpl implements MemberService {
     @Autowired     
     private MemberDao memberDao;

     @Override
     public Map<String, Object> checkLoginAvailable(Map<String, Object> param) {
         Map<String, Object> rs = new HashMap<String, Object>();
         
         String loginId = (String) param.get("loginId");
         Member member = memberDao.getMemberByLoginId(loginId);

         if(member == null){
                 rs.put("resultCode", "F-1");  //실패
                 rs.put("msg","해당 회원이 존재하지 않습니다.");
         } else if ( member.getLoginPw().equals(loginPw) == false ) {
                 rs.put("resultCode", "F-2");  //실패
                 rs.put("msg","비밀번호가 일치하지 않습니다.");
          else {
                 rs.put("resultCode", "S-1");  //성공
                 rs.put("msg","로그인 가능합니다.");
                 rs.put('id", member.getId());
          }
          return rs;
     }
}

 

로그아웃 구현하기

MemberController.java

@Controller
public class MemberController {

     @RequestMapping("member/doLogout")
     String doLogout(HttpSession session, Model model) {
         session.removeAttribute("loginedMemberId");

         String redirectUrl = "/article/list";

         model.addAttribute("jsAlertMsg", "로그아웃 되었습니다.");
         model.addAttribute("jsLocationReplaceUrl", redirectUrl);
         
         return "redirect";
     }
}

 

로그인 "ㅇㅇㅇ님 환영합니다"

 

MemberService.java

public interface MemberService { 
..........
    Member getMemberId(int id);
}

MemberServiceImpl.java

@Service
pulic class memberServiceImpl implements MemberService {
    ...........
     @Override
     public Member getMemberById(int id) {
         return memberDao.getMemberById(int id);
}

MemberDao.java

@Mapper
public interface MemberDao{
     ......
     Member getMemberId(@Param("id") int id);
}

MemberDao.xml

<?xml version="1.0" encoding="UTF-8"?>
http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.example.sbs.demo.dao.MemberDao">

.......
<select id="getMemberById" resultType="Member">
SELECT * FROM `member` WHERE id = #{id}
</select>

</mapper>