[트러블 슈팅]로그인시 로그아웃으로 변경

로그인 시에 localStorage에 토큰을 저장하는데 까진 했는데 로그인 버튼을 로그아웃으로 바꾸는 문제 해결중

 

24/02/05 해결

emitter를 사용해 해결했습니다.

로그인 시에 login이벤트를 발생시켜 data의 값을 변경했습니다.

 

 

<template>
    <div class="header">
        <div class="content">
            <img src="../assets/carrot.png" />
            <div>
               <RouterLink to="/fleamarket"><h3>중고거래</h3></RouterLink>
            </div>
        </div>
        <div class="inputs">
            <input type="text" placeholder="물품이나 동네를 검색해보세요" style="height: 80%; width: 288px;background-color: #F2F3F6;
            border:none"/>
            <RouterLink to="/login"><input type="button" value="채팅하기" style="height: 80%;width: 97px; margin-right: 10px; background-color: white; "/></RouterLink>
            <a v-if="hasToken"><input type="button" value="로그아웃" v-on:click="logout" style="height: 80%;width: 97px; margin-right: 10px; background-color: white;" /></a>
           <RouterLink to="/login" v-else><input type="button"  value="로그인" style="height: 80%;width: 97px; margin-right: 10px; background-color: white;" /></RouterLink>
        </div>
    </div>



</template>

<script>

export default{
    data(){
        return{
            hasToken:false
        }
    },
    mounted(){
        this.emitter.on('login',()=>{
            console.log('login!!!!!!');
            this.hasToken=true;
        });

        if(localStorage.getItem('token')){
            this.hasToken=true;
        }
        else{
            this.hasToken=false;
        }
    },
    methods:{
        logout:function(){
            localStorage.removeItem('token');
            this.hasToken=false;
        }
    }

}
</script>


<style scoped>
    .header{
        width: 100vw;
        min-width: 1080px;
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        position: static;
        margin: 0;
    }

    .content{
        display: flex;
        justify-content: flex-start;
        margin-right: auto;
    }



    .inputs>input{
        box-sizing: content-box;
        margin: 5px;
        font-size: 20px;
    }
    a{
        text-decoration: none;
        color: black;
    }
</style>

 

 

<template>
    <div class="container">

        <div class="box">
            <h1 style="text-align:center">로그인</h1>
            <input type="text" placeholder="아이디를 입력하세요" v-model="userId"/>
            <input type="password" placeholder="패스워드를 입력하세요" v-model="password"/>
            <input type="button" value="로그인" v-on:click="login"/>
            <p>
              아직 회원이 아니신가요?
              <RouterLink to="/register"><span style="color: aqua;">회원가입</span></RouterLink>
            </p>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default{

    data(){
        return {
            userId:"",
            password:""
        }
    },
    methods:{
        login:function(){
            const request = {
                userId:this.$data.userId,
                password:this.$data.password
            }

            axios.post("http://localhost:8080/auth/signin",request)
                .then(request=>{
                    localStorage.setItem('token',request.data.token);
                    this.emitter.emit('login');
                    this.$router.push({ path:'/'});
                });
        }
    }
}
</script>

<style scoped>
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    height:400px;
    border:1px solid black;
}
.box{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    border:1px solid black;
    padding:30px;
}
input{
    box-sizing:content-box;
    width:200px;
    padding:0;
    margin-bottom:10px;
}
</style>