Login.vue

팡태(❁´◡`❁)·2021년 12월 27일
0

vue2

목록 보기
1/26
<template>
    <div>
        <el-card class="fade-in-left" shadow="always">
            <h3>로그인</h3>
            <el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
                <el-form-item label="아이디" label-width="120px">
                    <el-input v-model="member.uid" size="mini" placeholder="아이디" style="width:192px"></el-input>
                </el-form-item>
            </el-form>
            
            <el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
                <el-form-item label="암호" label-width="120px">
                    <el-input v-model="member.upw" size="mini" placeholder="암호" show-password @keyup.enter="handleLogin"></el-input>
                </el-form-item>
            </el-form>

            <el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
                <el-form-item label=" " label-width="120px">
                    <el-button type="primary" size="mini" @click="handleLogin">로그인</el-button>
                        <el-button size="mini" @click="handleHome"></el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    import {useStore} from 'vuex';
    export default {
        methods:{
            async handleLogin() {
                const url      = `/member/select`;
                const headers  = { "Content-Type": "application/json" };
                const body     = this.member;
                const response = await this.axios.post(url, body, { headers: headers });
                console.log(response.data);

                // this.token = '43987f398j3fu..생략..98h3r8';
                // sessionStorage.setItem("TOKEN", this.token);
                if(response.data.status === 200) {

                    // 1. 토큰을 저장소에 보관
                    sessionStorage.setItem("TOKEN", response.data.result.token);

                    // 2. 페이지 Home으로 이동
                    this.$router.push({ name: 'Home' });

                    // 3. App.vue의 메뉴의 상태를 통지.
                    this.store.commit('setMenu', 'home');
                }
                else {
                    alert('아이디 또는 비밀번호가 맞지 않습니다');
                }
            },

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

                // App.vue로 메뉴가 변경된 것을 통보해야 함. 그럼 상단 메뉴가 바뀜
                this.store.commit('setMenu', 'home');
            }
        },
    
        data(){
            return {
                member: {
                    uid       : '',
                    upw       : '',
                    token     : '', /* 로그인시에 발행되는 인증키 */
                },
                store     : useStore()
            }
        }
    }
</script>

<style scoped>

</style>

0개의 댓글