Login.vue

<template>
    <div>
        <h3>src/components/Login.vue</h3>
        <el-card class="fade-in-left" shadow="always">
            <el-form>
                <el-form-item label="이메일: " label-width="120px">
                    <el-input type="text" size="mini" v-model="state.userid" style="width:192px" @keyup="handleEmailcheck" />
                    {{state.useremailcheck}}
                </el-form-item>

                <el-form-item label="암호: " label-width="120px">
                    <el-input type="password" size="mini" v-model="state.userpw" style="width:192px" />
                </el-form-item>

                <el-form-item label="" label-width="120px">
                    <el-button type="primary" size="mini" @click="handleLogin">로그인</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { reactive } from '@vue/reactivity'
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

export default {
    // setup에서는 'this'를 쓰지 않음!
    setup () {
        const router = useRouter(); // 이동하기
        const store = useStore();

        const state = reactive({
            userid: '123123@c.com',
            userpw: '123'
        });

        const handleLogin = async() => {
            const url     = `/member/select`;
            const headers = { "Content-Type": "application/json" };
            const body    = { email: state.userid, password: state.userpw };

            const response = await axios.post(url, body, { headers });
            if(response.data.status === 200) {
                console.log(response.data.token);
                sessionStorage.setItem("TOKEN", response.data.token); // 토큰보관

                alert('로그인 되었습니다.');

                const curl = sessionStorage.getItem("CURL");
                if(curl === null) {
                    // 주소창만 바뀜
                    router.push({ name: "Home" });

                    // App.vue에 메뉴 선택항목 변경 하도록 알려줌
                    store.commit("setMenu", "/");
                }
                else { // 이동하고자 하는 페이지가 존재하면 string -> object. JSON.parse
                    const query  = JSON.parse(sessionStorage.getItem("CURL_QUERY"));
                    const params = JSON.parse(sessionStorage.getItem("CURL_PARAMS"));
                    router.push({ name: curl, query: query, params: params });
                }

                // 로그인 상태
                store.commit("setLogged", true);
            }
        };

        return { state, handleLogin }
    },
}
</script>

<style lang="scss" scoped>
    @import url(../assets/mystyle.css);
</style>