var result = await Member .findOne({_id : sessionID}) .select({"name":1, "age":1});
.select({불러올키값:1, 뺴고싶은키값:-1})
// 7-1. 로그인 : 수정용 정보 불러오기
// 127.0.0.1:3000/member/selectone
router.get('/selectone', auth.checkToken, async function(req, res, next) {
try {
const sessionID = req.body.USERID;
// console.log(sessionID);
var result = await Member
.findOne({_id : sessionID})
.select({"name":1, "age":1});
if (result !== null) {
return res.send({status:200, result:result})
}
return res.send({status:0})
} catch (e) {
console.error(e);
return res.send({status:-1})
}
});
화면에 뿌린다.
: D:\vue_20220314\src\components\mypage\Menu1View.vue
2-1. onMounted에 넣어서 화면 호출과 동시에 불러온다.
2-2. 불러올때도 마찬가지로 토큰이 필요하기때문에 sessionStorage에서 불러온다.
: sessionStorage.getItem("TOKEN")
2-3. 불러온 정보를 state.info에 담는다.
: state.info = response.data.result;
클릭 메소드 사용
: D:\vue_20220314\src\components\mypage\Menu1View.vue
3-1. 토큰 필요
3-2. headers에 토큰을 담아서 던진다.
3-3. body에 수정할 정보를 담아서 던진다.
<template>
<div v-if="state.info">
<h3>정보수정</h3>
<el-form
label-width="100px"
style="max-width: 360px">
<el-form-item label="이름">
<el-input v-model="state.info.name"></el-input>
</el-form-item>
<!-- <el-form-item label="이메일">
<el-input v-model="state.email"></el-input>
</el-form-item> -->
<el-form-item label="나이">
<el-input v-model="state.info.age"></el-input>
</el-form-item>
<el-form-item label=" ">
<el-button @click="handleUpdate" type="primary">정보수정</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { reactive } from '@vue/reactivity'
import axios from 'axios'
import { onMounted } from '@vue/runtime-core'
export default {
setup () {
const state = reactive({
name : '',
email : '',
age : '',
token : sessionStorage.getItem("TOKEN")
})
onMounted( async() => {
await handleData();
})
const handleData = async() => {
const url = `/member/selectone`
const headers = {"Content-Type":"application/json","auth":state.token};
const response = await axios.get(url, {headers});
console.log('Menu1View.vue/hadleData/response ===> ',response);
if(response.data.status === 200) {
state.info = response.data.result;
}
// console.log('state.info ===> ',state.info);
}
const handleUpdate = async() => {
const url = `/member/update`;
const headers = {"Content-Type":"application/json","auth":state.token};
const body = {
name : state.info.name,
age : state.info.age
}
const response = await axios.put(url, body, {headers});
// console.log('handleUpdate/response ===> ', response);
if (response.data.status === 200) {
alert('정보수정 완료');
}
}
return {
state,
handleUpdate
}
}
}
</script>
<template>
<div>
<h3>암호변경</h3>
<el-form
label-width="100px"
style="max-width: 360px">
<el-form-item label="현재암호">
<el-input ref="pw" type="password" v-model="state.pw"></el-input>
</el-form-item>
<el-form-item label="변경암호">
<el-input ref="cpw" type="password" v-model="state.cpw"></el-input>
</el-form-item>
<el-form-item label="암호확인">
<el-input ref="cpw1" type="password" v-model="state.cpw1"></el-input>
</el-form-item>
<el-form-item label=" ">
<el-button @click="handlePassword" type="primary">암호변경</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
import axios from 'axios'
export default {
setup () {
const state = reactive({
pw : '',
cpw : '',
cpw1 : '',
token : sessionStorage.getItem("TOKEN")
})
const pw = ref(null);
const cpw = ref(null);
const cpw1 = ref(null);
const handlePassword = async() => {
if (state.pw.length <= 0) {
alert('암호를 입력하세요');
pw.value.focus();
return false;
}
if (state.cpw.length <= 0) {
alert('변경할 암호를 입력하세요');
cpw.value.focus();
return false;
}
if (state.cpw1.length <= 0) {
alert('변경할 암호를 한번 더 입력하세요');
cpw1.value.focus();
return false;
}
if (state.cpw !== state.cpw1) {
alert('변경 할 암호가 일치하지 않습니다');
cpw1.value.focus();
return false;
}
const url = `/member/updatepw`;
const headers = {"Content-Type":"application/json","auth":state.token};
const body = {
pw : state.pw,
pw1 : state.cpw
}
const response = await axios.put(url, body, {headers});
console.log('Menu2View.vue/hadlePassword/response ===> ',response);
if(response.data.status === 200) {
alert('암호변경 완료');
state.pw = null;
state.cpw = null;
state.cpw1 = null;
}
}
return {
state,
pw,
cpw,
cpw1,
handlePassword
}
}
}
</script>
<template>
<div>
<h3>회원탈퇴</h3>
<el-form
label-width="100px"
style="max-width: 360px">
<el-form-item label="현재암호">
<el-input ref="pw" v-model="state.pw"></el-input>
</el-form-item>
<el-form-item label=" ">
<el-button @click="handleDelete" type="primary">회원탈퇴</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
import axios from 'axios';
import { useRouter } from 'vue-router';
export default {
setup () {
const router = useRouter();
const state = reactive({
pw : '',
token : sessionStorage.getItem("TOKEN")
});
const pw = ref(null);
const handleDelete = async() => {
if (state.pw.length <= 0) {
alert('암호를 입력하세요');
pw.value.focus();
return false;
}
if(confirm('탈퇴하시겠습니까?')){
const url = `/member/delete`;
const headers = {"Content-Type":"application/json","auth":state.token};
const body = {
pw : state.pw,
}
const response = await axios.delete(url, {headers:headers, data:body});
// console.log('Menu3View.vue/handleDelete/response ===> ',response);
if (response.data.status === 200) {
alert('탈퇴되었습니다');
// 로그아웃 페이지를 호출
router.push('logout');
}
}
}
return {
state,
pw,
handleDelete
}
}
}
</script>