Vue 일지 #23 (20211005) 로그인

23. 로그인

-로그인

백엔드 : #46 로그인

 

 *로그인 화면 구성(Login.vue)

<template>

    <div>

        <h3>로그인</h3>

        아이디<input type="text" v-model="email" /> <br/>

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

        <input type="button" @click="handleLogin" value="로그인" />

    </div>

</template>

 

 *화면 확인

로그인 화면

 

 *로그인 버튼 클릭 시 이벤트 구성(Loginb.vue)

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

<script>

    import axios from 'axios'

    export default {

        methods:{

            async handleLogin(){

                const url = "/REST/api/member/login";

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

                const body = {

                    email : this.email,

                    passwd : this.passwd,

                }

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

                console.log(response);

            }

        },

        data(){

            return{

                email: '',

                passwd:''

            }

        }

    }

</script>

 

* console 값 확인

토큰 확인

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

 *로그인 이후 받은 토큰을 세션 스토리지에 저장한다.

 *로그인 이후 홈 화면으로 이동한다.

 export default {

        methods:{

            async handleLogin(){

                const url = "/REST/api/member/login";

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

                const body = {

                    email : this.email,

                    passwd : this.passwd,

                }

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

                //console.log(response);

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

                    sessionStorage.setItem("TOKEN", response.data.token); <- 토큰 저장

                    alert("로그인 성공했습니다."); <- 성공 알림창

                    this.$router.push({name: 'Home'}); <- home으로 이동

                }

                else{

                    alert("로그인 실패했습니다.");

                }

            }

        },

 

 

 *로그인 성공, 토큰 저장 확인

로그인 성공

토큰 저장