반응형
이번에는 회원관리에 대해서 만드는법을 살펴보자
요기 위에 보이는 승인 거절회원 , 추방회원 가입 승인 이렇게 구분되어있다.
시나리오는 이렇다
1) 가입을 처음하게 되면 로그인이 되지않는다.
2) 관리자가 승인을 해줘야 로그인이 된다.
3) 관리자가 승인 거절을 하게 되어 로그인이 안된다.
4) 회원 추방을 한다. 로그인이 안된다.
즉 2번을 제외하고는 로그인이 안되게 막으려고 한다.
그렇게 하려면
우선 오라클에서 TYPE으로 나누려고 한다.
0 - 대기
1 - 승인
2 - 거절
3 - 추방
이렇게 4가지 카테고리로 묶으려고 한다.
우선 뷰부터 보자
<div class="member_list" >
<table class="admin_board_wrap" id="user-admin">
<thead class="admin_boardList">
<th class="admin_board_head">이름</th>
<th class="admin_board_head">아이디</th>
<th class="admin_board_head">현재상태</th>
<th class="admin_board_head">가입일</th>
<th class="admin_board_head">게시글수</th>
<th class="admin_board_head">댓글수</th>
<th class="admin_board_head">가입승인</th>
</thead>
<tbody>
<c:forEach var="vo" items="${userInfo}">
<tr class="admin_board_content">
<td class="admin_board_content_nm"><a class="mypageModal user_id" value="${vo.userId}">${vo.userId}</a> </td>
<td class="admin_board_content_nm">${vo.userName}</td>
<td class="admin_board_content_nm">
<c:choose>
<c:when test="${vo.userStatus== 0}">취업준비생</c:when>
<c:when test="${vo.userStatus== 1}">직장인</c:when>
</c:choose>
</td>
<td class="admin_board_content_nm">${vo.userDate}</td>
<td class="admin_board_content_nm"><a href="#" class="modal_boardList_admin" data-user-id ="${vo.userId}">${vo.boardCnt}</a></td>
<td class="admin_board_content_nm"><a href="#" class="modal_reply_admin" data-user-id ="${vo.userId}">${vo.commentCnt}</a></td>
<c:choose>
<c:when test="${vo.userPass == 0}">
<td class="admin_board_content_nm">
<button data-user-id ="${vo.userId}" type="button" value="승인" class="appro">승인 </button>
<button data-user-id ="${vo.userId}" type="button" value="거부" class="deni">거부</button>
</td>
</c:when>
<c:when test="${vo.userPass == 1}">
<td class="admin_board_content_nm">
<button data-user-id ="${vo.userId}" type="button" value="승인" class="userDrop">회원 추방</button>
</td>
</c:when>
<c:when test="${vo.userPass == 3}">
<td>추방회원</td>
</c:when>
<c:when test="${vo.userPass == 2 }">
<td>승인거절회원</td>
</c:when>
</c:choose>
</tr>
</c:forEach>
</tbody>
</table>
우선 c:fi로 위에서 정한대로 0 부터 3까지 보여준다.
그다음에 ajax로 컨트롤러로 바꿔준다.
$('.appro').click(function(){
const successId = $(this).data("userId");
console.log(successId);
// 0 가입대기 , 1.가입승인, 2. 가입거절
$.ajax({
type : 'post',
url : '<c:url value="/admin/successId" />',
data : {
id : successId,
},
success : function(data){
},error : function(status, error) {
console.log('에러발생!!');
console.log(status, error);
}
}); // 아작스 종료
$('.modal_approve').fadeIn(500);
});
// 가입거부 버튼 클릭시 요청 삭제
$('.deni').click(function(){
console.log('회원가입거부!');
// 가입승인 거부됨 메일전송 서비스 만들면 좋을듯
});
$('.userDrop').click(function() {
const dropId = $(this).data("userId");
console.log(dropId);
$.ajax({
type : 'post',
url : '<c:url value="/admin/dropId" />',
data : {
id : dropId,
},
success : function(data){
},error : function(status, error) {
console.log('에러발생!!');
console.log(status, error);
}
}); //end ajax승인아나 추방 버튼을 누르면
data-id로 아이디를 끌고 온후
ajax를 동작시킨다.
컨트롤러를 보자
@ResponseBody
@PostMapping("/dropId")
public void dropID(String id) {
UserService.dropUser(id);
}
@ResponseBody
@PostMapping("/successId")
public void successId(String id) {
System.out.println(id);
System.out.println("open! user sign success Id ajax!");
UserService.successId(id);
}
@ResponseBody
@PostMapping("/failId")
public void failId(String id) {
System.out.println(id);
System.out.println("open! user sign failId Id ajax!");
UserService.failed(id);
}이렇게 한 뒤 매퍼를 보자
<!-- 가입 승인 -->
<update id="successId">
UPDATE user_info
SET user_pass = 1
WHERE user_id = #{id}
</update>
<!-- 가입 승인 -->
<update id="failed">
UPDATE user_info
SET user_pass = 2
WHERE user_id = #{id}
</update>
<!-- 회원 드롭 -->
<update id="dropUser">
UPDATE user_info
SET user_pass = 3
WHERE user_id = #{id}
</update>이렇게 user_pass를 정해준다.
그럼 가입 승인을 누르면 1로 변경되고
거정을 누르면 2번이되고
추방을 누르면 3번이 된다.
이제 로그인을 막아보자
// 메인 로그인 페이지 빈값확인
$('.aside_login_btn').click(function(){
if($('.asideId').val() === ''){
alert('아이디를 입력하세요.');
console.log('아이디를 입력하세요.');
$('.asideId').focus();
return;
} else if($('.asidePw').val() === ''){
alert('비밀번호를 입력하세요.');
$('.asidePw').focus();
return;
} else {
console.log('id, pw 모두 입력함')
//$('.loginForm').submit(); //ajax로 추후 처리 예정
console.log('id:'+$('.asideId').val());
console.log('pw:'+$('.asidePw').val());
const userId = $('.asideId').val();
const userPw = $('.asidePw').val();
const userInfo = {"userId":userId, "userPw":userPw};
$.ajax({
type : 'post',
url : '<c:url value="/user/userLogin" />',
data : JSON.stringify(userInfo),
dataType:"text",
contentType : "application/json; charset=UTF-8",
success : function(data) {
//checkInput.attr('disabled', false);
//code = data;
//console.log(rs);
if(data === 'idFail'){
alert('존재하지 않는 회원입니다!');
//$('.loginForm').submit();
console.log('db에 존재하지 않는 회원');
} else if (data === 'pwFail'){
alert('비밀번호가 틀렸습니다');
console.log('db에 존재하는 회원, 비번틀림');
} else if (data === 'wait'){
alert('가입 승인 중 입니다. 잠시만 기다려 주세요');
}else if (data === "refusal"){
alert('가입이 거절 되었습니다.')
}else if(data === "drop"){
alert(userId+'님은 로그인 제제 상태입니다. 관리자에게 문의 해주세요.')
}else {
alert(userId+'님 반갑습니다.');
console.log('db에 존재하는 회원, 로긘 성공');
location.href='/SHY/';
}
},
error : function(status, error) {
console.log('에러발생!!');
console.log(userInfo);
console.log(status, error);
}
});우선 로그인 하는 ajax를 해보자
컨트롤러를 확인해보자
//로그인
@ResponseBody
@PostMapping("/userLogin")
public String userLogin(@RequestBody UserVO vo, HttpSession session) {
System.out.println("userLogin post");
System.out.println("갖고온 param: " + vo.getUserId());
BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();
System.out.println(encoder.toString());
UserVO dbData = service.getInfo(vo.getUserId());
// 2022 03 27 석현 추가
if(dbData.getUserPass() == 0) {
return "wait";
}else if(dbData.getUserPass() == 2){
return "refusal";
}else if(dbData.getUserPass() == 3){
return "drop";
}
if(dbData != null) {
if(encoder.matches(vo.getUserPw(), dbData.getUserPw())) {
//로그인 성공 회원을 대상으로 세션 정보를 생성
session.setAttribute("login", dbData);
return "loginSuccess";
} else {
return "pwFail";
}
} else {
return "idFail";
}
우선 user에 대한 세션을 만들어 주고
user_pass가 0부터 3까지 확인해준다
그다음에 특정 단어를 리턴시켜준다.
그다음
if(data === 'idFail'){
alert('존재하지 않는 회원입니다!');
//$('.loginForm').submit();
console.log('db에 존재하지 않는 회원');
} else if (data === 'pwFail'){
alert('비밀번호가 틀렸습니다');
console.log('db에 존재하는 회원, 비번틀림');
} else if (data === 'wait'){
alert('가입 승인 중 입니다. 잠시만 기다려 주세요');
}else if (data === "refusal"){
alert('가입이 거절 되었습니다.')
}else if(data === "drop"){
alert(userId+'님은 로그인 제제 상태입니다. 관리자에게 문의 해주세요.')
}else {
alert(userId+'님 반갑습니다.');
console.log('db에 존재하는 회원, 로긘 성공');
location.href='/SHY/';
}이렇게 막아준다.
이제 동작해보자
처음 가입하면 관리자 페이지에 이렇게 승인 거부가 뜬다
승인을 하면 회원 추방버튼이 생긴다.
로그인이 잘되는걸 알수있다.
이제 추방을 눌러보자
이렇게 추방회원이라고 못 박혀 나온다.
로그인을 해보자
라고 나온다.
이상 포스팅 끝!
반응형
'Spring > 잡잡커뮤니티' 카테고리의 다른 글
| 구글차트를 이용한 데이터 시각화 (스프링 마이바티스) (0) | 2022.04.29 |
|---|---|
| 잡잡커뮤니티 관리자(Admin)페이지 만들기 회원관리(2) (데이터테이블, ajax, 서브쿼리) (0) | 2022.04.21 |
| 잡잡커뮤니티 관리자(Admin)페이지 만들기 회원관리(1) (0) | 2022.04.05 |
| 스프링 댓글 구현하기 feat ajax (1) | 2022.04.04 |
| 스프링 프로젝트 잡잡커뮤니티 만들기 다중게시판 (1) | 2022.03.21 |