회원암호수정

mypage/Menu2.vue

<template>
    <div>
        <el-form :inline="true" label-width="100px">
            <el-form-item label="현재암호">
                <el-input v-model="userpw" ref="userpw" placeholder="현재암호" show-password></el-input>
            </el-form-item>            
        </el-form>

        <!-- 암호확인 -->
        <el-form :inline="true" label-width="100px">
            <el-form-item label="변경할 암호">
                <el-input v-model="userpw1" ref="userpw1" placeholder="변경할 암호" show-password></el-input>
            </el-form-item>            
        </el-form>

        <el-form :inline="true" label-width="100px">
            <el-form-item label="암호확인">
                <el-input v-model="userpw2" ref="userpw2" placeholder="암호확인" show-password></el-input>
            </el-form-item>            
        </el-form>
        <el-form :inline="true" label-width="100px">
            <el-form-item label=" ">
                <el-button type="primary" @click="handlePW">암호변경</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="default" @click="handleMain" >메인화면</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                userpw : '',
                userpw1 : '',
                userpw2 : '',
                newpw : '',
                dropdown : true,
                token : sessionStorage.getItem("TOKEN"),
            }
        },
        methods : {
            handleMain(){
                // this.$emit('changeLogged','home');
                this.$router.push({name:'Home'});
            },
            
            async handlePW(){
                if(this.userpw === ''){
                    alert('현재암호를 입력하세요');
                    this.$refs.userpw.focus();
                    return false;
                }
                
                if(this.userpw1 === ''){
                    alert('변경할 암호를 입력하세요');
                    this.$refs.userpw1.focus();
                    return false;
                }
                
                if(this.userpw2 === ''){
                    alert('변경할 암호를 한번 더 입력하세요');
                    this.$refs.userpw2.focus();
                    return false;
                }
                
                if(this.userpw1 !== this.userpw2){
                    alert('비밀번호가 일치하지 않습니다');
                    this.$refs.userpw2.focus();
                    return false;
                }
                else if(this.userpw1 === this.userpw2){
                    this.newpw = this.userpw1, this.userpw2;
                    // console.log('newpw =>',this.newpw); 
                }
                                
                // 백엔드
                const url = `/member/mypage?menu=2`;
                const headers = {
                    "Content-Type":"application/json",
                    "TOKEN" : this.token 
                    // headers가 먼저 들어가기 떄문에 검증 후 토큰의 유효성이 검증되지 않으면 
                    // body를 궂이 받을 필요가 없기떄문에 headers에 토큰을 넣어서 보냄
                };
                const body = {
                    upw : this.userpw,
                    upw1 : this.newpw                   
                }
                console.log(this.newpw);

                // get(조회), post(추가), put(수정), delete(삭제)
                // 조회 : await this.axios.get(url, {headers:headers});
                // 추가 : await this.axios.post(url, body, {headers:headers});
                // 수정 : await this.axios.put(url, body, {headers:headers});
                // 삭제 : await this.axios.delete(url, {headers:headers, data:{ }});
                const response = await this.axios.put(url, body, {headers:headers});
                // console.log(response);
                if(response.data.status === 200){
                    alert('암호가 변경되었습니다'); 
                    this.userpw = '';                   
                    this.userpw1 = '';                  
                    this.userpw2 = '';                 
                }
            },
        }
    }
</script>

<style scoped>

</style>