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

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

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

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

참고한 곳

Vue에서 쿠키 가져오기

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

return document.cookie

예를 들면 저런 식으로.

로그인 후 목록 갱신하기

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

frontend/components/Header.vue

{{main.message}} {{username.message}} 님! LOG OUT {{main.message}} {{ login.message }} {{ signup.message }} export default { name: "Header", data () { return { username : { message : decodeURIComponent(document.cookie), }, computed : { cookie(){ return document.cookie } }, };

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

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

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

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

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

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

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

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

로그인 전

로그인 후

from http://codelist.tistory.com/75 by ccl(A) rewrite - 2021-11-16 16:26:33