Vue 일지 #20 (20210928) spring 연동(비밀번호 변경)
20. 비밀번호 변경
-비밀번호 변경
*비밀번호 변경 화면 구면(Menu7.vue)
... ...
<h3>비밀번호 변경</h3>
아이디 <input type="text" v-model="userid"> <br />
기존 암호 <input type="text" v-model="userpw"> <br />
새 암호 <input type="text" v-model="usernewpw"> <br />
<input type="button" @click="handleNewpw" value="비밀 번호 변경"/>
... ...
*화면 확인
*비밀번호 변경 구현(Menu7.vue)
*토큰을 받아온 뒤 구현이 가능하도록 조건문을 삽입하고 토큰이 없는 경우 로그인 페이지로 이동한다.
*백엔드에서 만든 member_password를 사용한다.
*토큰을 받아와야 하므로 token을 data에 등록한다.
... ...
async handleNewpw(){
const key = "123456_"
const url = "/ROOT/api/member_password";
const headers = {"Content-Type":"application/json",
token : key + this.token}
const body = {
userid : this.userid,
userpw : this.userpw,
usernewpw : this.usernewpw,
}
if(this.token != null){ <- 세션 스토리지에 토큰 유무를 확인
const response = await axios.put(url, body, {headers});
console.log(response.data);
if(response.data.status === 200){
alert("수정 완료");
}
}
else{ <- 토큰이 없다면 알림창을 표시하고 로그인 페이지로 이동
alert("로그인 후 가능")
this.$router.push({name: 'Menu5'});
}
},
},
data(){
return{
userid : '',
username : '',
usertel : '',
userpw : '',
usernewpw : '',
//세션 스토리지에서 토큰 읽기
token : sessionStorage.getItem("TOKEN")
}
}
}
</script>
*비밀번호 변경(토큰이 없는 경우)
