[Node.js, Vue.js] 로그인 유무에 따라 login/logout 띄우기

 

 

굳이 따지자면 Node.js 카테고리는 아니지만 올랑상점 패치니까 여기에 작성한다.

 

원래는 바로 로그인, 로그아웃, 회원가입 전부 뜨게 해 놓은 상태라 로그인 안 한 상태이면 로그아웃이 뜨지 않도록 하고 싶었다.

 

해결하는 데에는 4시간 정도 걸린 것 같은데 무슨 기능을 써야 할 지 헤매느라 오래 걸렸지만 구현하는데는 오래 걸리지 않았다.

 

 

 

참고한 곳

Computed 속성과 Watch | Vue.js

 

 

쿠키와 document.cookie

 

 

 

---

 

 

 

Vue에서 쿠키 가져오기

 

나는 Nodejs에서 쿠키를 생성하는데 구글링해보면 Vue에서 쿠키를 생성해서 사용하는 글이 대부분이라 여기서 조금 헤맸지만 javascript에서 쿠키 사용하는 글을 보니 document.cookie 라는 명령어를 사용했고 다행히 잘 동작했다.

 

 return document.cookie

 

예를 들면 저런 식으로.

 

 

 

 

로그인 후 목록 갱신하기

 

내 코드는 아래와 같다. (이 기능 구현에 필요한 코드만 있음. 전체 코드 X)

 

frontend/components/Header.vue

<!-- component 용. component는 재사용을 위해 사용됨 -->

<template>
  <div class="head" v-if="cookie">  <!--cookie가 true일 때 즉, 쿠키가 있다면 보여줄 목록-->
    <a v-bind:href="main.url">{{main.message}}</a>
    <h3>{{username.message}} 님!</h3>
    <router-link to="/logout">LOG OUT</router-link>
  </div>
  <div class="head" v-else>  <!--쿠키가 없다면 보여줄 목록-->
    <a v-bind:href="main.url">{{main.message}}</a>
    <router-link to="/login"> {{ login.message }} </router-link>
    <router-link to="/signup"> {{ signup.message }} </router-link>
  </div>
</template>

<script>
export default {
  name: "Header",
  data () {
    return {
      username : {  /* 쿠키에 저장된 값 디코딩해서 가져오기  */
        message :  decodeURIComponent(document.cookie),
      },
  
     computed : {  /* 여기서 쿠키를 반환하면, v-if에서 쿠키 존재하면 true로 인식  */
        cookie(){
          return document.cookie
        }
      },
};


</script>

 

 

제일 먼저 쿠키가 있을 때는 이 목록, 없을 때는 else 블록에 있는 목록을 보여주기 위해서 v-if를 써야한다.

 

v-if는 true/false로 판별해서 해당하는 값을 보여주는데 나처럼 값(쿠키)의 유무를 이용해서 띄울 수 있다.

 

여기서 제일 중요한 게 computed 다.

 

참고한 사이트에 들어가서보면 설명이 잘 되어 있는데, 내가 막혔던 부분이 로그인 후 없던 쿠키가 생겼을 때 갱신이 되면서 회원명, 로그아웃 버튼이 보이도록하는 부분이었는데 이 명령어가 해결해줬다.

 

원래는 쿠키가 생겨도 목록이 갱신되지 않아서 막혀있던 차에 저 명령어를 사용하니 로그인 후에 잘 갱신된다.

 

주의할 점 : 반드시 computed는 return {}밖에 써줘야 한다. 이거 때문에 1시간이나 붙잡고 있었다.

 

 

 return 부분에 디코딩이 있는 이유는 내 코드는 쿠키에 사용자명을 저장하고 그 사용자 명을 가져와서 000이라는 사람이 로그인 되었다고 보여주고 싶었는데 디코딩을 안하면 쿠키값을 그대로 가져오기 때문에 숫자%알파벳으로 보인다.

 

그리고 사실 지금 저 코드 상태로는 session=000 님! 이라고 뜨기 때문에 String.slice()를 써서 session= 부분을 잘라야하는데 일단 잠시 미뤘다. (백엔드에 할 게 많아서)

 

 

로그인 전

 

로그인 후