<template>
<div>
<el-card class="fade-in-left">
<h3>회원탈퇴</h3>
<el-form>
<br />
<el-form-item label="암호: " label-width="120px">
<el-input type="password" v-model="state.pw" style="width:200px" /> <br />
<br />
<el-button @click="handleDeleteAction">회원탈퇴</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
import { reactive } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
export default {
setup () {
const router = useRouter();
const store = useStore();
const state = reactive({
pw : '',
token: sessionStorage.getItem("TOKEN")
});
const handleDeleteAction = async() => {
if(confirm('정말 탈퇴하시겠습니까?')) {
const url = `/member/delete`;
const headers = {
"Content-Type": "application/json",
"token": state.token
};
const body = {
password : state.pw,
}
const response = await axios.delete(url, { headers: headers, data: body })
console.log(response.data);
if(response.data.status === 200){
sessionStorage.removeItem("TOKEN");
alert('회원탈퇴 되었습니다.');
router.push({name:'Home'});
store.commit("setMenu", "/");
store.commit("setLogged", false);
}
}
}
return { state, handleDeleteAction }
}
}
</script>
<style lang="scss" scoped>
@import url(../../assets/mystyle.css);
</style>