Node, Vue 일지 #6 (20210907) 회원 탈퇴
6. 회원 탈퇴
-회원 탈퇴 구현
*mypage에서 회원 탈퇴 버튼 생성(vue Mypage.vue)
*마이 페이지에서 회원 정보 수정과 탈퇴를 실행할 수 있도록 2개의 버튼을 만들어 각각의 화면을 구성한다.
*회원 탈퇴 버튼 클릭 시 회원 탈퇴 화면을 나타내고 그 안에 버튼을 하나 만들어 클릭 시 회원 탈퇴가 이루어 지도록 한다.
<template>
<div>
<h3>마이 페이지</h3> <hr />
<input type="button" @click="menu=1" value="회원정보 수정" />
<input type="button" @click="menu=2" value="회원 탈퇴" />
<div v-if="menu===1">
회원정보 수정
</div>
<div v-if="menu===2">
<input type="button" value="회원 탈퇴" @click="deleteHandle "/>
</div>
</div>
</template>
*화면 확인
*회원 탈퇴 화면의 회원 탈퇴 버튼 클릭 시 이루어질 methods 구현(vue Mypage.vue)
*회원 탈퇴는 토큰이 있어야 하므로 data에 토큰 변수를 입력하고 headers에 토큰 변수를 넣어준다.
*버튼 클릭 시 탈퇴 확인 유무를 묻는 알림창 표시, 탈퇴 완료 후 home 화면으로 이동과 메뉴바 자동 갱신 추가.
<script>
import axios from 'axios';
export default {
methods:{
async deleteHandle(){
const ret = confirm('탈퇴할까요?');
if( ret ) {
const url = "/member/delete";
const response = await axios.delete(url, {
headers : {
"Content-Type":"application/json",
"token" : this.token,
},
data:{
}
});
console.log(response);
if(response.data.ret === 1) {
alert(response.data.data);
sessionStorage.removeItem("MyToken");
this.$emit('changeMenu', 0);
this.$emit('changeLogged');
}
}
}
},
data() {
return {
menu : 1,
token : sessionStorage.getItem("MyToken"),
}
}
}
</script>
*node delete 생성(node member.js)
*탈퇴는 토큰이 있어야 하므로 checkToken으로 토큰 확인.
*회원 탈퇴 버튼 클릭 시 auth.js에서 인증 후 넘어오는 토큰에 포함된 아이디 값을 변수로 지정한다.
**auth.js 오류 수정 if(typeof(user.idx) === 'undefined') {
//127.0.0.1:3000/member/delete
router.delete('/delete', checkToken, async function(req, res, next){
try{
//인증 후 넘어오는 토큰에 포함된 아이디 값
const userid = req.idx; //auth 참고
//db연결
const dbconn = await mongoclient.connect(mongourl);
const coll = dbconn.db(mongodb).collection(mongocoll);
//삭제할 db 조건
const query = {_id : userid};
const result = await coll.deleteOne(query);
//console.log(result);
if(result.deletedCount === 1){
return res.send({ret : 1, data : "회원 탈퇴 되었습니다."});
}
return res.send({ret : 0, data : "회원 탈퇴 실패 했습니다."});
}
catch(error){
console.error(error);
res.send({ret:-1, data:error}); //에러
}
});
*회원 탈퇴 실행(크롬)
*탈퇴 후 토큰이 삭제 되고 home 화면으로 이동한다.
