[Vue.js] 로그인 성공 시, localStorage를 이용하여 사용자 아이디가 메인화면에 보이도록 설정하기!

 

 

로그인까지 만들었다.
사용자가 로그인을 하게되면
메인화면에 사용자 아이디가 보이도록
설정해보자!

 

 

 

 

[ 로그인 만들기 ]

블로그에 적었던 vue코드가 조금 바뀌었습니다

[SpringBoot, Vue.js] 로그인 화면 만들기, passwordEncoder.matches를 통해 암호화된 비밀번호 비교하기.

 

 

 

※

이 코드는 그냥 연습용으로 겉모습만 로그인 된 것처럼 만든 것입니다.

그렇기에 실제로 로그인된 화면이라고 보긴 어렵습니다.

만약 제대로된 로그인을 구현하고 싶으시다면,

스프링에서 처리하도록 하며 토큰 혹은 세션을 발급하는 걸 권장합니다.

 

 

 

---

 

 

 

1. 화면 동작과 전체 코드

• 화면 동작

 

 

 

• 코드는 다른 부분 때문에 수정 중이라 후에 완성되면 올리도록 하겠습니다.

 

 

 

 

---

 

 

 

 

2. 어떻게 만들까?

• 메인화면

 

처음에 구상했던 것은 페이지를 새롭게 하나 만들어서 로그인이 되면 해당 페이지로 넘어가도록 만들었다. 그런데 생각해보니 그렇게 되면 자원을 더 사용하게 되는 것 같아 후에 수정했다. (만약 메인 페이지에 게시글이 보이도록 되어있으면 로그인 후 들어간 페이지에도 같은 게시글이 보이도록 코드를 추가하고 그만큼 자원이 낭비된다고 생각했음)

 

원래 가지고 있던 MainView 페이지는 오른쪽 아이콘을 누르면 회원가입 페이지로 연결되는 버튼과 로그인 페이지로 연결되는 버튼이 있었다. 그리고 이런 부분을 보여주는 vue가 RightSide.vue였다. 사용자가 로그인을 했고, 로그인 했다는 기록(?)이 들어오면 RightSide.vue가 다른 vue로 바뀌도록 만들었다.

 

 

 

 

---

 

 

 

 

3. LoginView.vue

<script> 코드

  methods: {
    async login() {
      try {
        const res = await axios.post("http://localhost:8080/api/login", {
          userId: this.userId,
          pw: this.pw
        });
        localStorage.setItem("displayName", this.userId());
        alert("로그인되었습니다.");
        this.$router.replace("/main");
      } catch (e) {
        alert(e.response.data);
      }
    },

로그인 만드는 포스팅에서 보여줬던 코드랑 조금 달라졌다. 

 localStorage.setItem("displayName", this.userId);
        /* 로그인 성공하면 path에 적힌 경로로 넘김, query에 적은 데이터와 함께 */
        this.$router.push({
          path: "/customer-view",
          query: { userId: this.userId }
        });

이 코드가 코드를 변경하기 전이다. 로그인이 성공하면 페이지가 /customer-view로 넘어가도록 하면서, userId가 쿼리로 같이 가게된다. 이렇게 만드니 마음에 들지 않았던 점이 url에 사용자 아이디가 보여진다는 것이다. 그래서 후에 코드를 수정했다.

수정된 코드를 보겠다. localStorage를 썼는데, 이건 자바스크립트에서 지원하는 것이다. vue는 자바스크립트 문법을 지원하기 때문에 당연히 사용할 수 있다. localStorage를 사용하면 브라우저에 key-value 값을 Storage에 저장할 수 있다. 저장한 데이터는 세션 간에 공유된다. 즉, 세션이 바뀌어도 저장한 데이터가 유지된다. localStorage는 setItem(아이템 추가), getItem(아이템 읽기), removeItem(item 삭제), clear(도메인 내의 localStrage 값 삭제), length(전제 아이템 갯수), key(index로 key 값 찾기)가 있다. 그 중 setItem을 사용하여 로그인한 사용자 아이디를 저장하도록 하겠다. key에 들어가는게 displayName이 되고 value에 들어가는게 userId가 된다. 

this.$router.push를 this.$router.replace로 코드를 변경했다. push는 브라우저 히스토리에 새 항목을 추가한다. 사용자가 뒤로 가기를 누르면 로그인 페이지로 돌아갈 수 있다. 이부분이 마음에 안들어서 replace로 변경했다. replace는 현재 히스토리 항목을 대체한다. 뒤로 가기를 눌러도 로그인 페이지로 돌아갈 수 없다. 보통 replace를 써서 로그인 성공 후에 뒤로 가기를 방지한다.

 

 

 

 

---

 

 

 

4. MainView.vue

<script> 코드  

data() {
    return {
      isRightSideOpen: false,
      isLeftSideOpen: false,
      /* 로그인 시 화면에 나타낼 사용자 아이디 혹인 닉네임 */
      displayName: null,
    }
  },

localStorage에 저장했던 displayName 키를 null로 설정했다.

 

 

<script>의 computed 코드 

  loggedIn() {
      /* 로그인 여부, displayname이 있으면 로그인 상태로 간주 */
      return Boolean(this.displayName);
    },

displayName에 문자열이 들어와서 null이 아니게 되면 true를 반환한다. 만약 null이면, false를 반환한다.

 

 

<script> 코드 중 methods

    // 로그아웃 하는거.
    loggedOut() {
      localStorage.removeItem('displayName');  // 저장소 비우기
      this.displayName = null;                 // null로 만들어서 오른쪽 사이드바 바꾸고
      this.$router.replace('/main');           // main 화면
    },

로그인을 하고 나면 RightSide.vue가 CustomerRight.vue로 변경된다. 아직 CustomerRight.vue에 대해 설명하지 않았지만  그 안에는 회원의 아이디를 나타내고 로그아웃을 할 수 있는 클릭을 만들 것이다. 로그아웃 텍스트를 누르면 CustomerRight.vue가 부모에게 로그아웃을 알린다.(사용자가 로그아웃을 눌렀어요~) 그래서 그 로그아웃 로직을 부모인 MainView.vue에서 처리하는 것이다.

displayName에 들어온 key와 value 값을 removeItem으로 지워준다. 그리고 displayName 값을 null로 설정한다. 그리고 main 화면을 다시 불러온다. 아까도 설명했지만 this.$router.push를 쓰면 뒤로 가기 눌렀을 때 로그인 상태가 나타난다. 그래서 replace로 작성했다.

 

 

<template> 코드

<RightSide v-if="!loggedIn" :open="isRightSideOpen" />
<CustomerRight v-else :open="isRightSideOpen" 
               :display-name="displayName" @logged-out="loggedOut" />

여기서 각 조건에 맞춰 RightSide를 보이게 할지, CustomerRight를 보이게 할 지 결정할 것이다. 우리의 조건은 로그인이 되었을 때 CustomerRight이 보이도록 하는 것이다. 로그인이 된 걸 어떻게 알게 했는지 되돌아보면, 평소엔 displayName에 null을 넣었다가 로그인이 되면 displayName에 key와 value가 오면서 loggenIn( )으로 안에 값의 여부를 확인했다. 

코드를 살펴보자. 만약에(v-if) loggedIn의 return 값이 false이면 RightSide 뷰를 isRightSideOpen한다고 했다. isRightSideOpen은 열림/닫힘 상태를 전달하는 역할을 한다.

만약에(v-else) v-if에서 지정한 값 외의 다른 값이 나오면 CustomerRight이 open된다. :display-name="displayName"으로 사용자 id 값이 넘어가도록 했다. 여기서 잘 알아둬야할 것은 사용자 id가 현재 vue인 MainView.vue에서 CustomerRight.vue로 넘어간다. 사용자 id를 보여줄 곳은 MainView가 아닌 CustomerRight이기 때문에 그렇다. 그 다음 코드를 살펴보자. CustomerRight에서 로그아웃을 클릭하는 동작이 수행되면, 그 사실을 MainView가 알도록 설정했다. 그래서 @logged-out을 통해 MainView는 로그아웃을 수행했는지 안했는지 알게된다. 그리고 사용자가 로그아웃을 누르면 loggedOut이란 메서드가 실행되며 로그아웃이 처리된다.

+) 살펴보면 display-name이라고 되어있는 부분이 있었다. HTML은 대소문자 구별을 하지 않는다. 그런데 props(상위 컴포넌트가 하위 컴포넌트로 데이터를 전달하는 것)는 대소문자를 구별한다. 쉽게 설명하면 HTML과 props는 서로 이름을 정하는 규칙이 다른 것이다. 그래서 HTML에 displayName이라고 적으면 내부에선 displayname으로 돌아가서 props의 이름과 자동으로 매핑을 못할 수 있다. 그래서 HTML을 적을 땐 kebab-case로 적고 props는 camelCase로 적는게 좋다.

 

 

Q. HTML에서도 props에서도 displayname이라고 하면?

A. 잘 돌아간다. 현재 코드에서 문제되는 건 없는데, Vue가 권장하는 형식이 아니다. 아마 권장 형식대로 사용하시는 분과 협업을 하게된다면 오류가 발생할 것이니, 당장은 쓰지 않더라도 해당 내용을 일단 알아두면 좋을 것 같다. 그리고 Extraneous non-props attributes... 이런 에러가 발생한다면 서로 매핑이 제대로 됐는지 확인해보자.

 

 

 

 

---

 

 

 

5. CustomerRight.vue

<script> 코드

props: {
    open: {
      type: Boolean,
      required: true,
    },
    displayName: {
      type: String,
      default: '',
    }
  },

부모 컴포넌트였던 MainView.vue가 보낸 정보를 props에서 받는다. 패널이 열렸는지 아닌지에 대한 것이 open. 사용자 id를 가져오는 곳이 displayName이 된다. 아까 설명해서 HTML의 이름 형식과 props의 이름 형식에 대해 말했는데, props가 이 부분이 되겠다. 타입은 String이고 부모에게서 받아온 것이 없다면 기본값은 빈 문자열로 한다.

 

 

<script> 코드

computed: {
    // 이름을 보여준다.
    nameToShow() {
      return this.displayName;
    }
  },

computed는 값이 바뀌면 자동으로 재계산해서 템플렛이 즉시 변경되도록 해준다. 이름이 바뀌면 새로 연산을 해야하니 computed에 써봤다. nameToShow는 props로 받아온 displayName을 보여준다.

 

 

<script> 코드

methods: {
    // 부모에게 로그아웃 알리기
    logout() {
      this.$emit('logged-out');
    }
    
    
    
<template> 코드

<p class="logout" @click="logout">logout</p>

props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보낼 때 사용한다. 그렇다면 emit는? 자식 컴포넌트가 부모 컴포넌트로 데이터를 보낼 때 사용한다. 아까 MainView에서 로그아웃을 처리하는 로직을 만들었다. 

   // 로그아웃 하는거.
    loggedOut() {
      localStorage.removeItem('displayName');  // 저장소 비우기
      this.displayName = null;                 // null로 만들어서 오른쪽 사이드바 바꾸고
      this.$router.replace('/main');           // main 화면
    },​

logout 텍스트를 누르면 logout이란 메서드가 실행되고, logout 메서드는 $emit을 통해 부모 컴포넌트에게 로그아웃을 처리하도록 요구한다.