30. 아이디 중복 확인
같은 아이디가 가입 되는 것을 방지하기 위해 중복 확인을 추가한다.
백엔드(spring)
- member 저장소에 중복 확인 쿼리문 작성
// userid 중복 조회
@Query(value = "SELECT COUNT(USERID) FROM USER WHERE USERID =:userid", nativeQuery = true)
public int queryCheckUserid(String userid);
- member 서비스에 중복 확인 생성
1. MemberService
// userid 중복 확인
public int checkUserid(String id);
2. MemberServiceImpl
// userid 중복 확인
@Override
public int checkUserid(String id) {
return mRepository.queryCheckUserid(id);
}
- 중복 확인 추가, 회원 가입 수정(MemberController)
//중복 확인
//127.0.0.1:8080/REST/member/check
@RequestMapping(value = "/member/check", method = {RequestMethod.POST},
consumes = MediaType.ALL_VALUE,
produces = MediaType.APPLICATION_JSON_VALUE)
public Map<String, Object> checkPOST(@RequestBody Member member){
Map<String, Object> map = new HashMap<String, Object>();
try{
String userid = member.getUserid();
int Count = mService.checkUserid(userid);
if(Count != 0){ //user 중복 체크
map.put("status", "id 중복");
map.put("check", 1);
}
else{
map.put("status", "사용 가능");
map.put("check", 0);
}
}
catch(Exception e){
e.printStackTrace();
map.put("status", e.hashCode());
}
return map;
}
//회원가입
//127.0.0.1:8080/REST/member/join
@RequestMapping(value = "/member/join", method = {RequestMethod.POST},
consumes = MediaType.ALL_VALUE,
produces = MediaType.APPLICATION_JSON_VALUE)
public Map<String, Object> joinPOST(@RequestBody Member member){
Map<String, Object> map = new HashMap<String, Object>();
try{
BCryptPasswordEncoder bcpe = new BCryptPasswordEncoder();
String userid = member.getUserid();
int Count = mService.checkUserid(userid); //중복 체크(중복이 없다면 0 출력)
if(Count != 0){
map.put("status", "id 중복");
map.put("check", 1);
}
else{
member.setUserpw(bcpe.encode(member.getUserpw()));
member.setUserrole("USER"); //관리자는 1명이고 이후엔 전부 USER이므로 ROLE에 USER로 SET 한다.
mService.insertUser(member);
map.put("status", 200);
}
}
catch(Exception e){
e.printStackTrace();
map.put("status", e.hashCode());
}
return map;
}
- 중복 확인
1. 중복 아닐 경우
2. 중복 일 경우
3. 회원 가입 시 중복 있을 경우
프론트 엔드(vue)
- Join.vue에 중복 확인 용 버튼 생성
<template>
<div>
<h3>회원 가입</h3>
아이디 <input type="text" v-model="userid" placeholder="아이디 입력"/>
<input type="button" @click="handleCheck" value="중복 확인" /><br /> <- 중복 확인 버튼 생성
비밀번호 <input type="password" v-model="userpw" placeholder="비밀번호 입력"/><br />
이름 <input type="text" v-model="username" placeholder="이름 입력"/><br />
<input type="button" @click="handleJoin" value="회원가입" />
</div>
</template>
- 중복 확인, 회원 가입 버튼 클릭 시 중복 확인 구현
async handleCheck() {
const url = "/REST/member/check";
const headers = {"Content-Type":"application/json"}
const body = {
userid : this.userid
}
const response = await axios.post(url, body, {headers});
console.log(response);
if(response.data.check === 0){
alert("사용 가능한 아이디 입니다.")
}
else{
alert("이미 가입된 아이디 입니다.")
}
},
async handleJoin(){
// 유효성 검사
if(this.userid.length === 0){
alert("아이디를 입력하세요.");
}
if(this.userpw.length === 0){
alert("비밀번호를 입력하세요.");
}
if(this.username.length === 0){
alert("이름을 입력하세요.");
}
const url = "/REST/member/join";
const headers = {"Content-Type":"application/json"}
const body = {
userid : this.userid,
userpw : this.userpw,
username : this.username
}
const response = await axios.post(url, body, {headers});
console.log(response);
if(response.data.check === 1){
alert("이미 가입된 아이디 입니다.")
}
else{
if(response.data.status === 200){
alert("회원 가입 되었습니다.");
this.$router.push({name:'Home'}); //성공 시 home으로 이동
}
else{
alert("회원 가입 실패했습니다.");
}
}
}
- 중복 확인
1. 등록된 id 확인
2. 중복 확인
3. 회원 가입 시 중복 확인
'프로젝트' 카테고리의 다른 글
| 32. 로그아웃 (0) | 2022.01.10 |
|---|---|
| 31. 로그인 (0) | 2022.01.10 |
| 29. 회원 가입 (0) | 2022.01.10 |
| 28. vue 생성(spring 연동) (0) | 2022.01.10 |
| 27. 선수 조회(포지션) (0) | 2022.01.08 |