Vue 일지 #24 (20211005) 비밀번호 변경

24. 비밀번호 변경

-비밀번호 변경

백엔드 : #47 비밀번호 변경

 

 *mypage 생성

mypage 생성

 *mypage 등록(index.js)

... ...

import Mypage from '@/components/Mypage'

 

const routes = [

    {path:'/',  name:'Home', component:Home},

    {path:'/Join',  name:'Join', component:Join},

    {path:'/Login',  name:'Login', component:Login},

    {path:'/Mypage',  name:'Mypage', component:Mypage},

]

... ...

 

 *mypage 등록(App.vue)

<template>

  <div id="nav">

    <router-link to="/">Home</router-link>|

    <router-link to="/Join">Join</router-link>|

    <router-link to="/Login">Login</router-link>|

    <router-link to="/Mypage">Mypage</router-link>|

    <hr />

    <router-view />

  </div>

 

 *화면 확인

mypage 등록

 

*비밀번호 변경 화면 구성(Mypage.vue)

<template>

    <div>

        <h3>비밀번호 변경</h3>

        이메일 <input type="text" v-model="email" /> <br/>

        기존 암호 <input type="password" v-model="passwd" /> <br/>

        신규 암호 <input type="password" v-model="passwd1" /> <br/>

        <input type="button" @click="passwdUpdate" value="암호 변경" />

    </div>

</template>

 

 *화면 확인

비밀번호 변경 화면

 *암호 변경 버튼 클릭 시 이벤트 구성(Mypage.vue)

 *console.log(response); 를 이용해 전달값 확인

<script>

     import axios from 'axios'

    export default {

        methods:{

            async passwdUpdate() {

                const url = "/REST/api/customer/passwd";

                const headers = {"Content-Type":"application/json",

                    token : this.token }

                const body = {

                    email : this.email,

                    passwd : this.passwd,

                    passwd1 : this.passwd1,

                }

                const response = await axios.post(url, body, {headers});

                console.log(response);

            }

        },

        data(){

            return{ 

                email : '',

                passwd : '',

                passwd1 : '',

                token : sessionStorage.getItem("TOKEN"),

            }

        }

    }

</script>

 

*비밀번호 변경

console 값 확인

 

 *비밀번호 변경은 토큰이 있어야 동작 되므로 if 조건문으로 토큰 유무를 먼저 확인한다. 

 *토큰이 없다면 로그인 화면으로 이동한다. 

 *if 조건문을 이용해 성공 유무 확인과 다음 동작 입력

 *비밀번호 변경 후 home 화면으로 이동한다.

 *변경 후 h2-console 에서 확인한다.

<script>

     import axios from 'axios'

    export default {

        methods:{

            async passwdUpdate() {

                const url = "/REST/api/customer/passwd";

                const headers = {"Content-Type":"application/json",

                    token : this.token }

                const body = {

                    email : this.email,

                    passwd : this.passwd,

                    passwd1 : this.passwd1,

                }

                if(this.token != null){

                    const response = await axios.post(url, body, {headers});

                    //console.log(response);

                    if(response.data.status === 200){

                        alert("비밀번호가 변경 되었습니다.");

                        this.$router.push({name: 'Home'});

                    }

                }

                else{

                    alert("로그인이 필요합니다.");

                    this.$router.push({name: 'Login'});

                }

            }

        },

        data(){

            return{ 

                email : '',

                passwd : '',

                passwd1 : '',

                token : sessionStorage.getItem("TOKEN"),

            }

        }

    }

</script>

 

토큰이 없는 경우

로그인 화면으로 이동

비밀번호 변경 성공

변경 전

 

변경 후