[Spring, Vue.js] 카카오 간편 로그인 만들기② - Vue로 프론트엔드 작성하기 (REST API)

 

 

[Spring,Vue.js] 카카오 간편 로그인 만들기 ① - 구조와 흐름 파악하고 카카오 디벨로퍼스 설정하기

 

 

 

 

카카오 디벨로퍼스에서 필요한 건 모두 설정했다.
이제 설정한 걸 토대로, 프론트를 작성해 보자!

 

 

 

 

1. 화면

• 로그인 

 

• 카카오 간편 로그인 

 

 

 

 

 

---

 

 

 

2. 전체 코드 

• LoginView.vue

<script>

import axios from "axios";

export default {
  name: 'LoginView',
  data() {
    return {
      userId: "",
      pw: ""
    };
  },
  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);
      }
    },
    // 카카오 로그인 창이 보이도록 하는 메서드
    kakaoLogin() {
      // REST_API_KEY는 따로 저장 해둠. 그 위치를 적었음
      const REST_API_KEY = import.meta.env.VITE_KAKAO_REST_API_KEY;
      //${window.location.origin}은 지금 이 페이지가 뜬 출처를 자동적으로 넣는다.
      // 설정해둔 REDIRECT_URI 넣어도 상관없음
      const REDIRECT_URI = `${window.location.origin}/oauth/code/kakao`;

      if (!REST_API_KEY) {
        alert('REST_API_KEY 비어있음!');
        return;
      }

      // state 값 생성하고 보관했다.
      const state = btoa(String(Date.now()));
      // state 보관
      sessionStorage.setItem("kakao_oauth_state", state);

      // 개발자가 인가 코드를 받기 위해 쿼리 파라미터에 담야할 정보들
      const authUrl =
          `https://kauth.kakao.com/oauth/authorize?response_type=code` +
          `&client_id=${encodeURIComponent(REST_API_KEY)}` +
          `&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
          `&state=${encodeURIComponent(state)}`;

      // authUrl로 페이지 이동하기
      window.location.href = authUrl;

    }
  }
}

</script>



<template>
  <div class="login-view">

    <div class="center-icon">
      <img src="../assets/wings.png" alt="날개아이콘" class="wings"
           @click="$router.push('/main')" style="cursor:pointer;"/>
      <div class="create">
        <p @click="$router.push('/main')">Sign In </p>
     </div>
   </div>

    <div class="login-container">
      <div class="id-box">
        <p>ෆ ID </p>
        <input v-model="userId" @input="userId" type="text" name="userId" placeholder="id"/>
      </div>
      <div class="pw-box">
        <p>ෆ PW </p>
        <input v-model="pw" type="password" name="password" placeholder="password"/>
      </div>
        <button class="login-text" @click="login"> SIGN IN </button>
    </div>

    <!-- 카카오 버튼 -->
    <div class="kakao">
      <img src="../assets/kakao.png" alt="Kakao" @click="kakaoLogin"/>
    </div>

  </div>
</template>



<style>
.login-view {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  background: white;
  justify-content: center;
}

.center-icon{
  position: absolute;
  display: flex;
  top: 7%;
  flex-direction: column;
  align-items: center;
}

.wings{
  width: 60px;
  height: 60px;
}

.create {
  margin-top: -5px;
  font-size: 1.4rem;
  color: black;
  font-family: 'Cafe24Meongi-B-v1.0';
  letter-spacing: 2px;
  text-shadow: 1px 1px 5px #fff8;
}

.create p:hover{
  transition: color 0.2s, font-weight 0.2s;
  font-weight: bold;
  color: #00ff80;
  cursor: pointer;
}

.login-container {
  position: absolute;
  width: 33vw;
  height: 30vh;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  justify-content: center;
  display: flex;
  background: black;
  border-radius: 30px;
  box-sizing: border-box;
}

.id-box{
  position: absolute;
  width: 33vw;
  height: 10vh;
  left: 18%;
  top: 10%;
  align-items: center;
  flex-direction: row;
  display: flex;
  gap: 9.3%;
  font-size: 1.0rem;
  font-weight: bold;
  font-family: 'GowunBatang-Regular', serif;
  color: white;
}
.id-box input{
  width: 15vw;
  height: 4vh;
  padding: 3px 13px 2px 4px;
  font-size: 1rem;
  transition: border-bottom 0.2s ;
}

.pw-box{
  position: absolute;
  width: 33vw;
  height: 10vh;
  left: 18%;
  top: 30%;
  align-items: center;
  flex-direction: row;
  display: flex;
  gap: 7.3%;
  font-size: 1.0rem;
  font-weight: bold;
  font-family: 'GowunBatang-Regular', serif;
  color: white;
}
.pw-box input{
  width: 15vw;
  height: 4vh;
  padding: 3px 13px 2px 4px;
  font-size: 1rem;
  transition: border-bottom 0.2s ;
}


.login-text {
  position: absolute;
  width: 20vw;
  height: 5.3vh;
  bottom: 17%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.4s ease, border 0.4s ease, color 0.4s ease;
}

.login-text:hover{
  background-color: #00ff80;
  border: #00ff80;
  color: white;
  -webkit-text-stroke: 0.8px black;
}

/* 카카오 버튼 */
.kakao{
  position:  absolute;
  top:60%;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}

</style>

 

 

• KakaoCallback.vue

<script>
import axios from "axios";

export default {
  // 백엔드에서 토큰 교환이 이뤄지도록 받아온 인가 코드를 보내는 역할을 하는 클래스
  name: "KakaoCallback",
  async created() {
  
    // 1) 쿼리스트링에서 code와 state 추출한다.
    // 여기 url에 인가코드가 들어있다. 인가코드를 code 부분에서 빼오는 것!
    const url = new URL(window.location.href);
    // ?code=…이런 형태로 되어있어서, code 뒤의 값을 읽는 것이다.
    const code = url.searchParams.get("code");
    const state = url.searchParams.get("state");

    // 2) state 검증
    // 받아온 state가 saved와 맞는지 확인한다.
    const saved = sessionStorage.getItem("kakao_oauth_state");

    // 한 번 쓴 sessionStorage를 재사용 못하도록 제거한다.
    sessionStorage.removeItem("kakao_oauth_state");

    // 카카오가 인가 코드를 안줬거나 || 카카오가 state를 안줬거나 || 우리가 저장한 state가 없다거나 || 카카오가 준 state와 저장한 state가 다르거나
    if (!code || !state || !saved || state !== saved) {
      alert("잘못된 접근입니다. (state 검증 실패)");
      // 로그인 화면으로 돌아가며, 실패 페이지로 돌아가지 않는다.
      this.$router.replace("/login");
      return;
    }

    try {
      // 이제 토큰을 교환하는 것은 spring에서 해준다. 그래서 code를 스프링으로 post로 보낸다.
      const { data } = await axios.post("http://localhost:8080/oauth/kakao", { code });

      // displayname에 보이도록 하기 위해 localStrage에 저장해준다.
      if (data?.nickname) {
        localStorage.setItem("displayName", data.nickname);
        alert(`환영합니다, ${data.nickname}님!`);
      } else {
        alert("닉네임을 받지 못했어요: " + JSON.stringify(data));
      }

      // 메인으로 이동
      this.$router.replace("/main");
    } catch (e) {
      console.error(e);
      alert(e?.response?.data ?? "카카오 로그인 실패");
      this.$router.replace("/");
    }
  }
}

</script>

<template>

</template>

<style scoped>

</style>

다 다른 프로젝트에서 카카오 간편 로그인을 수행하기 때문에, 수정이 필요할 수 있어서 어떤 코드인지 간단하게 설명을 적어왔습니다. 

 

 

 

 

---

 

 

 

 

3. 카카오 디자인, REST API KEY 보관함

• aasets

카카오 디자인 가이드에서 다운로드한 이미지를 src 하위 폴더 assets에 넣어 저장한다.

 

 

• .env.local File 만들기_ REST API KEY 보관용; 해도 되고 안 해도 됩니다.

해당 파일은 루트 디렉터리에 만들어야 한다. 루트 디렉터리는 위의 사진에서 join-app을 뜻한다. join-app에 커서를 대고 오른쪽 마우스를 누르면 File이 보일 것이다. File을 눌러 .env.local을 적어준다. 반드시 파일명과 위치는 같아야 한다.

 

VITE_KAKAO_REST_API_KEY = 발급 받은 REST API 키를 넣으면 된다.

이렇게 해도 되고, 귀찮으면 이따가 인가코드를 받기 위해 작성한 url에 직접 넣어도 된다. 

 

 

 

 

---

 

 

 

 

4. LoginView.vue  

• template 부분

    <div class="kakao">
      <img src="../assets/kakao.png" alt="Kakao" @click="kakaoLogin"/>
    </div>

kakao 클래스 만들고 이미지를 띄운다. 이미지의 경로를 적어주고 이미지를 클릭했을 때 수행할 메서드를 적는다. kakaoLogin이 script에 작성될 메서드 이름이 된다.

 

 

• style 부분

.kakao{
  position:  absolute;
  top:60%;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}

 

 

• script 부분

 kakaoLogin() {
 }

카카오 이미지를 클릭하면 실행될 메서드를 작성한다. 그리고 이후의 코드는 모두 kakaoLogin 메서드 내부에 적어준다. (헷갈린다면 위의 전체 코드를 참고하세요!)

 

      // ①
      const REST_API_KEY = import.meta.env.VITE_KAKAO_REST_API_KEY;
      // ②
      const REDIRECT_URI = `${window.location.origin}/oauth/code/kakao`;

      // ③
      if (!REST_API_KEY) {
        alert('REST_API_KEY 비어있음!');
        return;
      }

①
const를 붙인 변수는 다른 곳에서 변경이 불가하도록 막는 역할을 한다. 다른 클래스에서 REST_API_KEY에 값을 설정하려고 한다면, 오류가 출력될 것이다. 보통 프로젝트는 다른 사람들과 진행되기 때문에, 변경되어서는 안 되는 중요한 변수의 경우 const를 붙여 막는 게 좋다. 사실 지금은 꼭 써야 할 이유는 없지만 그래도 나름 중요하다고 티를 내보겠다.

REST_API_KEY는 import를 써서 현재 있는 위치를 나타냈다. import의 역할은 코드를 사용하기 위해 다른 파일에서 데이터를 가져온다. 아까 .env.local을 루트 디렉터리에 있도록 설정했다. 그 위치를 나타내어 가져오도록 한 것이다. 만약 이 파일을 만들지 않았다면, 걱정 말고 카카오 디벨로퍼스에서 발급받았던 REST_API_KEY를 = 옆에 그대로 붙여주면 된다. 혹시라도 카카오 간편 로그인 화면이 나타나지 않는다면, .env.local의 위치를 다시 확인하길 바란다. 꼭 루트 디렉터리에 만들어야한다. 루트 디렉토리 안에 있는 다른 디렉토리에 넣으면 vue가 인식하지 못한다.

②
REDIRECT_URI는 카카오가 인가코드를 전달하는 곳이다. REST_API_KEY와 같이 직접 값을 넣어도 된다. 혹은 .env.local에 작성해도 된다. 그러나 ${window.location.origin}을 붙여 지금 이 페이지가 뜬 출처를 받아와 자동으로 맞는 리다이렉트 URI를 만들도록 작성했다. 만약 배포를 하게 된다면 주소가 달라지게 된다.(예로, http://localhost:5173/oauth/code/kakao -> https://myapp.com/oauth/code/kakao) 물론 주소가 달라지면 카카오 디벨로퍼스의 리다이렉트 URI에 추가해야 한다. 그러나 vue를 열어서 REDIRECT_URI 코드는 변경하지 않아도 된다.  알아서 접속 중인 오리진에 맞게 자동으로 수정할 것이다. 

③
REST_API_KEY를 .env.local 파일 내에 작성하여 환경변수가 되도록 했다. 물론 이 방식은 Vite에서 사용되는 것으로, VITE_KAKAO_REST_API_KEY처럼 VITE_ 접두사로 적어두면, Vite가 실행 시점에 읽어서 프론트 코드에서 import.meta.env.VITE_KAKAO_REST_API_KEY로 접근할 수 있다. 

결국 REST_API_KEY는 LoginView.vue에 없고, .env.local에 있다. 그래서 .env.local 파일에 REST_API_KEY가 없을 수 있고 그걸 놓칠 수 있으니까 조건문을 달아서 해당 키가 없음을 나타나도록 했다.

 

 

 

      // ①
      const state = btoa(String(Date.now()));
      // ②
      sessionStorage.setItem("kakao_oauth_state", state);

①
state 코드는 어차피 배포할게 아니라서 꼭 필요한 코드는 아니다. 그러나 간단하게 CSRF를 방지할 수 있도록 만들어보겠다. CSRF는 사용자 브라우저를 속여서, 사용자가 의도하지 않은 정상 요청을 보내도록 한다. 그렇게 사용자의 인증을 획득하거나 권한을 악용한다.

어떻게 state를 만들 거냐면, Date.now로 현재 시각을 밀리초 숫자로 받아온다. 그리고 그 숫자를 String으로 덮어서 문자열로 바꾼다. btoa는 문자열을 Base64로 인코딩한다. 그러면 숫자로 되어있는 밀리초 1756350123456가 MTc1NjM1MDEyMzQ1Ng== 이렇게 최종적으로 변경된다. 물론 이렇게 만드는 방법은 아주 간단한 연습용이다. (실제로 하려면 crypto.randomUUID()와 같이 진짜 랜덤을 돌리는 게 더 낫다.)

②
이렇게 만든 state를 보관하고 있어야 한다. 그 보관을 sessionStorage에 할 것이다. 인가 코드를 받아오기 위해 authUrl에 state를 같이 넣을 것이다. 그러면 카카오가 authUrl을 받고 다시 대답을 보낼 때 state 값을 그대로 돌려줄 것이다. 그럼 내가 아까 보낸 state 값과 카카오가 준 state 값을 비교하여 누가 중간에 끼워 넣은 것은 없는지 확인할 수 있다.

sessionStorage는 sessionStorage.setItem(key, value)으로 되어있다. "kakao_oauth_state"는 key가 되고, state는 값이 된다. 그럼 sessionStorage는 뭘까? sessionStorage는 탭(세션) 단위 저장으로 탭을 닫으면 사라진다. 그래서 다른 탭과 공유되지 않는다. session에 저장해야 일회성으로 적합하다. 

 

 

      // ①
      const authUrl =
          `https://kauth.kakao.com/oauth/authorize?response_type=code` +
          `&client_id=${encodeURIComponent(REST_API_KEY)}` +
          `&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
          `&state=${encodeURIComponent(state)}`;

      // ②
      window.location.href = authUrl;

①
카카오로부터 인가 코드를 받기 위해 쿼리 파라미터에 정보들을 담아준다. 여기서 지금까지 정성껏 적었던 변수 앞에 encodedURIComponent가 적혀있다. encodedURIComponent는 URL에서 프로토콜, 도메인, 경로구분자(/ : ? & #)등 특수한 의미를 갖는 문자들도 인코딩한다. 쉽게 말해서 URI 구성요소를 안전하게 인코딩해주는 역할이다. 대부분의 특수 문자들을 인코딩하기 때문에 URL 전체를 인코딩할 때 적합하지 않고 쿼리 파라미터 값을 인코딩해야 할 경우 유용하다. 전체 URL을 인코딩할 때는 encodeURI가 적합하다.

②
window.location.href는 브라우저 주소창에 새 값으로 바꾸어 해당 페이지를 이동시킨다. authUrl이 적혀있으니, authUrl로 완전히 이동하게 된다. 그렇게 카카오 간편 로그인 창이 출력될 것이다.

window.location.href는 히스토리에 기록되어 뒤로 가기가 가능하다. window.location.assign(authUrl);과 똑같이 작동하기 때문에 코드를 window.location.assign(authUrl);으로 바꿔도 무관하다.

만약 여기까지 왔는데 카카오 간편 로그인 창이 안 나타난다면, 쿼리 파라미터에 들어간 REST_API_KEY와 REDIRECT_URI를 다시 살펴보고, .env.local의 위치를 확인해 보자.

 

 

 

 

---

 

 

 

4. KakaoCallback.vue  

• script

// ①
import axios from "axios";

// ②
export default {

}

①
LoginView.vue의 전체코드를 보면 위의 코드가 똑같이 적혀있다.(안 적었다면 적어야 한다!) import axios는 백엔드에 코드를 전달하고자 할 때 즉, 네트워크 요청을 하기 위해 사용한다.

②
export default는 Vue 컴포넌트 객체를 내보낸다는 뜻이다. 지금은 아무것도 내보내지 않겠지만, 이제 이 밑으로 나오는 코드는 모두 export default 안에 작성하여 내보낼 것이다.

 

 

  // ①
  name: "KakaoCallback",
  
  // ②
  async created() {
  
  }

①
이 코드는 export default 안에 적는다. name은 컴포넌트의 내부 식별 이름이다. 꼭 필요한 부분은 아니다. 나중에 경고, 에러로 이름이 찍혀 읽기 쉽게 도와주거나 그 외에서 편리함을 돕는다.

②
created를 제대로 설명하기 위해선 라이프사이클을 알아야 한다. 근데 그러면 너무 길어진다. 그냥 쉽게 말해서 KakaoCallback 컴포넌트는 비즈니스 로직만 처리하는 컴포넌트가 된다. URL을 파싱 하고, state 검증하고, 백엔드로 보내는 정도의 일만 수행한다. 그래서 DOM을 조작할 필요가 없다. 어쨌든 이 컴포넌트는 비즈니스 로직만 처리해서 최대한 빨리 처리하도록 created를 사용하는 게 더 좋다는 것만 알아두자.

 

 

    // ①
    const url = new URL(window.location.href);

    // ②
    const code = url.searchParams.get("code");
    
    // ③
    const state = url.searchParams.get("state");

①
카카오 간편 로그인은 이미 사용자 화면에 나타나서, 사용자는 로그인 수행하고 동의 항목을 체크했을 것이다. 그러면 사용자가 설정한 권한 범위는 카카오 서버가 잘 간직하고 있다. 그리고 카카오는 그 보증으로 인가 코드를 돌려준다. 여기 URL에 인가 코드가 들어있다.

사용자가 권한 범위를 설정하면 카카오는 알아서 authUrl에 들어있는 리다이렉트 URI로 돌려보낸다. 그니까 주소가 리다이렉트 URI 주소로 바뀌는 것이다. 거기에 카카오는 인가 코드를 쿼리 파라미터로 추가하여 보내고 code와 state를 리다이렉트 URI에서 뽑아야 하니 window.location.href로 현재 주소를 가져오도록 했다. window.location.href는 현재 URL을 확인하는 데 사용하거나 다른 URL로 이동하여 페이지를 전환하는데 활용한다.

②
예를 들어 searchParams가 뭔지 궁금해서 구글에 검색을 했다고 가정하자. 그럼 URL에 https://www.google.com/search?q=searchParmas...라고 쓰여있을 것이다. searchParams.get("q")를 적으면 ?q=의 값을 get 할 수 있게 된다. 그러니까 code에는 searchParams가 들어가게 된다.

실제 코드는 code를 get 하겠다고 되어있으니, ?code=를 찾아 값을 code(인가코드)에 넣게 된다. 이게 가능한 이유는 searchParams가 쿼리스트링으로 키-값 형태로 다루게 해주는 표준 API이기 때문이다.

③
CSRF를 방지하기 위해 state 값을 넣어 authUrl로 보냈었다. 카카오가 리다이렉트를 보내면서 state 값을 돌려줬으니, 내가 보낸 값과 카카오가 준 값이 맞는지 확인하기 위해 state 값을 꺼낼 것이다.

 

 

    // ①
    const saved = sessionStorage.getItem("kakao_oauth_state");
    
    
    // ②
    sessionStorage.removeItem("kakao_oauth_state");

①
LoginView.vue에서 sessionStorage.setItem("kakao_oauth_state", state)를 했었다. 미리 저장해 둔 state 값을 sessionStorage에서 꺼내 saved에 넣을 것이다.

②
꺼낸 값은 바로 지워준다. 왜냐하면 재사용할 수 있기 때문이다. sessionStorage에 남아있게 되면 사용자가 뒤로 가기를 하거나 앞으로 가기를 했을 때 콜백이 될 수 있다. sessionStorage를 지우지 않고 state를 검증을 통과한다면, 사용자가 뒤로 가기 혹은 앞으로 가기, 새로고침을 수행했을 때 sessionStorage의 값을 다시 꺼내와 또 검증을 하고 토큰을 발급할 수 있다.(일회성 사용을 목표로 했는데 못하게 됨) 그래서 이런 상황을 방지하고자 바로 값을 지워주는 게 좋다.

 

 

    // ①
    if (!code || !state || !saved || state !== saved) {
      alert("잘못된 접근입니다. (state 검증 실패)");
      this.$router.replace("/login");
      return;
    }

①
if문으로 인가 코드와 상태가 제대로 왔는지 검증할 것이다. if문 안의 조건문은 (카카오가 인가 코드를 안 줬거나 || 카카오가 state를 안줬거나 || state를 꺼내온 게 없거나 || 카카오가 준 state와 저장한 state가 다르거나)이다. 만약 조건문을 통과하지 못하면 alert을 보내고 login 페이지로 보낸다. 이때 replace는 실패한 페이지로 돌아가지 않는다.

 

 

    // ①
    try {

    } catch(e) {

    }

①
예외가 발생할 수 있는 코드는 try에 넣고, 예외가 발생했을 때 처리할 문장을 catch에 넣는다. 이 밑에 나오는 코드는 try에 넣으면 된다. 

 

 

   // ①
   const { data } = await axios.post("http://localhost:8080/oauth/kakao", { code });

①
토큰 교환은 백엔드에서 처리할 거다. 토큰이 있으면 사용자의 정보를 조회할 수 있는 권한을 얻게 된다. 그래서 중요한 작업의 경우 백엔드로 처리하는 게 좋다. (참고한 코드가 이렇게 진행해서 인가코드를 프론트로 받긴했지만, 백엔드로 하는게 더 좋다.) 그래서 인가 코드를 백엔드로 보내줘야 한다. 이 코드가 백엔드로 보내는 코드이다. 인가코드는 토큰을 교환하기 위한 코드로 나름 민간 한 값이라고 생각해서 POST로 보내 쿼리로 보내지 않도록 했다.

백엔드에서 여러 가지 처리를 할 것이다.(토큰도 받고, 사용자 정보 조회도 하고~) 그러면 그 처리된 결과는 {data}로 받게 된다.

 

 

      // ①
      if (data?.nickname) {
        localStorage.setItem("displayName", data.nickname);
        alert(`환영합니다, ${data.nickname}님!`);
      } else {
        alert("닉네임을 받지 못했어요: " + JSON.stringify(data));
      }
      
      // ②
      this.$router.replace("/main");

①
여기서부터는 백엔드 처리가 다 끝나고, vue 사용자 닉네임을 보이도록 하기 위해 닉네임을 받아오는 코드가 된다. 

조건문을 보면 data?.nickname이라고 되어있다. 이걸 옵셔널 체이닝이라고 한다. 백엔드에서 받은 결과 data에 data가 잘 왔는지 그리고 nickname이 잘 왔는지 확인한다. 옵셔널 체이닝을 쓰면 잘 왔는지 확인하는 부분에 특징이 있다. data가 null 혹은 undefined인지 확인한다. null이나 undefined가 오면 에러를 보내지 않고 그냥 통과시킨다. data가 잘 왔으면 nickname이 빈 문자열/0/false/null/undefined인지 확인하고 아니면 실행한다.

제대로 닉네임이 프론트에 도착했으면 localStorage에 저장한다. 아까 전에 sessionStorage에 state를 저장했던걸 기억하면 sessionStorage는 탭단위라고 했다. 탭단위로 이뤄지는 것과 달리 localStorage는 새로고침, 탭 이동 후에도 계속 저장되어 있다. 그러면 state와 달리 닉네임은 localStorage에 둔 이유가 뭘까? state는 일회성처럼 쓰여야 한다. 만약 닉네임을 탭단위로 저장하게 했다면 사용자가 새로운 탭을 열었을 때, 닉네임이 새 탭에서는 보이지 않게 된다. 그래서 localStorage에 저장한 것이다. 

아마 이 코드에서 각자의 프로젝트에 맞게 수정을 해야 할 것이다. displayName은 메인 화면에 설정해 둔 것으로 사용자가 회원가입 후 로그인을 하면 이름이 보이도록 했고, 카카오 간편 로그인을 하면 사용자의 닉네임이 보이도록 설정했다. 

②
닉네임을 잘 받아왔고 문제가 없으면, main 화면으로 이동한다. 아까 replace는 /main으로 변경되기 전 페이지로 돌아갈 수 없다고 했다. 카카오 간편 로그인을 제대로 수행했으면 뒤로 가기를 눌러 돌아갈 수 없도록 했다. 

혹시라도 프로젝트의 구조에 궁금할 수 있으니 설명을 좀 더 덧붙여보겠다. displayName에 값이 들어오면 메인화면 속에 넣어둔 오른쪽 패널이 CustomerRight 컴포넌트로 교체되도록 했다.(로그인을 수행하지 않으면 RightSide.vue로 회원가입/로그인을 할 수 있다.) CustomerRight 컴포넌트에는 사용자 이름이 보이며 로그아웃 버튼이 함께 있다. 로그아웃은 실제로 동작한다기보다(?) 그렇게 보이도록 만들었다. 사용자가 로그아웃을 누르면 localStorage의 저장된 값이 remove 되고 localStorage에 값이 없어지니 오른쪽 패널은 교체되어 RightSide로 보이도록 했다.

 

 

    // ①
    catch (e) {
      console.error(e);
      alert(e?.response?.data ?? "카카오 로그인 실패");
      this.$router.replace("/login");
    }
  }

①
try는 끝났고 catch를 작성할 것이다. catch는 예외가 발생했을 때 어떻게 처리할지 적는다고 했다. console.error는 개발자 콘솔에 에러 객체 e를 빨간색 로그로 찍는다.

e가 없거나, e.response가 없더라도 런타임 오류 없이 undefined를 반환한다. e?.response?.data가 존재하면 그걸 그대로 알림으로 띄우고, 없으면 카카오 로그인 실패를 띄운다.

 

 

 

 

---

 

 

 

5. index.js

const routes = [
    { path: '/main', name: 'Main', component: MainView },
    { path: '/simpleRegister', name: 'SimpleRegister', component: SimpleRegister },
    { path: '/basicRegister', name: 'BasicRegister', component: BasicRegister },
    { path: '/completeView', name: 'CompleteView', component: CompleteView },
    { path: '/login', name: 'LoginView', component: LoginView },
    // ①
    { path: '/oauth/code/kakao', name:'KakaoCallback', component: () => import("../components/loginview/KakaoCallback.vue")},
]

①
index.js를 만들어야 한다. 필자는 src 하위 디렉터리에 router를 만들고 그 안에 index.js를 만들었다. routes 목록 중에 맨 밑에 KakaoCallback이 있다. 이걸 그대로 복사해서 붙여 넣어야 한다.

이게 왜 필요할까? 카카오가 http://localhost:5173/oauth/code/kakao?code=...&state=...이런 형태로 돌려주면, Vue Router가 이 경로를 보고 KakaoCallback 컴포넌트를 띄운다. path에 /oauth/code/kakao를 경로를 적고 component: () => import("...")를 하면 이 경로로 들어올 땐 KakaoCallback.vue를 네트워크로 가져와서 렌더링 한다. 리다이렉트 URI를 프론트로 잡아서 꼭 적어줘야 한다.안 적어주면 백엔드로 인가코드를 보내야 하는데 그걸 못한다. (안보내면 토큰교환도 못함!)

 

 

 

---

 

 

다음은 백엔드로 토큰 교환하는 부분을 적어보겠습니다.

만약 다 하고 나서도 안 되는 부분이 있다면 댓글을 남겨주세요.

제가 빼먹은 부분이 있을지도 몰라요,,, 헷 🐥

! 화이팅 !

 

 

---