통합구현 #7 - Mypage

김형우·2022년 3월 15일
0

mongoose + vue.js

목록 보기
8/15
  • 로그인이 되어 있어야 함

1. 정보수정

  1. 로그인 할때의 토큰을 이용해서 현재 회원의 정보를 불러온다.
    : 백엔드) exp_20220311/routes/member.js
    1-1. 정보를 불러올때, 이름과 나이만 불러온다.
    : 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})
    }
});
  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;

  2. 클릭 메소드 사용
    : D:\vue_20220314\src\components\mypage\Menu1View.vue
    3-1. 토큰 필요
    3-2. headers에 토큰을 담아서 던진다.
    3-3. body에 수정할 정보를 담아서 던진다.

정보수정) Menu1View.vue 전체코드

<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>

2. 암호변경

암호변경) Menu2View.vue 전체코드

<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>

3. 회원탈퇴

회원탈퇴) Menu3View.vue 전체코드

<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>
profile
The best

0개의 댓글