통합구현 2022/03/15(member, App.vue, login/out)

파일명 routes/member.js (백엔드)

// 127.0.0.1:3000/member/selectone
router.get('/selectone', auth.checkToken, async function(req, res, next){
    try {
        const sessionID = req.body.USERID; // 토큰에서 추출

        // 아이디에 해당하는 값을 조회
        const result = await Member.findOne({_id : sessionID}).select({"name":1, "age":1});1
        console.log(result);
        if(result !== null){
            return res.send({status:200, result:result});            
        }
        return res.send({status:200, result:0});
    } catch (e) {
        console.error(e);
        return res.send({status:-1});
    }
})

파일명 App.vue

<template>
  <div style="padding: 20px;">
    {{logged}}
    <button @click="handleMenu('home')">home</button>
    <button @click="handleMenu('login')" v-if="!logged" >login</button>
    <button @click="handleMenu('logout')" v-if="logged" >logout</button>
    <button @click="handleMenu('join')" v-if="logged === false" >join</button>
    <button @click="handleMenu('mypage')" v-if="logged === true" >mypage</button>
    <hr />

    <router-view></router-view>
  </div>
</template>

<script>
import { onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

export default {
  setup () {
    const router = useRouter();
    const store  = useStore();

    // stores의 getters호출
    const logged = computed( () => store.getters.getLogged );    
   
    const handleMenu = (menu) =>{
      console.log("App.vue ====>",menu);
      router.push(menu);
    }   

    // 생명주기(F5, refresh가 수행됨)
    onMounted(() => {
      // console.log(sessionStorage.getItem("TOKEN"));
      if(sessionStorage.getItem("TOKEN") !== null){
        store.commit('setLogged', true);
      }
      else{
        store.commit('setLogged', false);
      }
    })

    return { handleMenu, logged }
  }
}
</script>

<style lang="scss" scoped>

</style>

파일명 components/LoginView.vue

<template>
    <div style="padding: 20px;">
        <h3>Login.vue</h3>

        <label style="width:80px; height: 30px; display:inline-block;">아이디 </label>
        <input type="text" ref="userid" v-model="state.userid" placeholder="아이디" /> <br />

        <label style="width:80px; height: 30px; display:inline-block;">암호 </label>
        <input type="password" ref="userpw" v-model="state.userpw" placeholder="암호" /> <br />

        <label style="width:80px; height: 30px; display:inline-block;"> </label>
        <el-button type="primary" @click="handleLogin" size="small">로그인</el-button>

    </div>
</template>

<script>
import { reactive , ref} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

export default {
    setup () {
        const router = useRouter();
        const store  = useStore();

        // 빈 ref 객체 생성
        const userid = ref(null);
        const userpw = ref(null);

        const state = reactive({
            userid : '',
            userpw : '',
        });

        const handleLogin = async() => {
            // 유효성 검사
            if(state.userid <= 0){
                alert('아이디를 입력하세요');
                userid.value.focus();
                return false;
            }
            if(state.userpw <= 0){
                alert('암호를 입력하세요');
                userpw.value.focus();
                return false;
            }

            const url = `/member/select`;
            const headers = {"Content-Type":"application/json"};
            const body = { 
                id : state.userid,
                pw : state.userpw
            };
            const response = await axios.post(url, body, {headers});
            console.log(response.data);

            if(response.data.status === 200) {
                sessionStorage.setItem("TOKEN", response.data.result);
                alert('로그인 되었습니다.');
                store.commit('setLogged', true);
                router.push({name:'Home'});
            }
        }        

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

<style lang="scss" scoped>

</style>

파일명 components/LogoutView.vue

<template>
    <div>

    </div>
</template>

<script>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

export default {
    setup () {

        const router = useRouter();
        const store  = useStore();

        onMounted(() => {
            sessionStorage.removeItem("TOKEN");
            alert('로그아웃 되었습니다.');
            store.commit('setLogged', false);
            router.push({name:'Home'});

        })

        return {}
    }
}
</script>

<style lang="scss" scoped>

</style>