TheHeader.vue

<script setup>
.
.
.

import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useAuthStore } from "@/store/auth";

const store = useAuthStore();
const router = useRouter();

const move = (path) => {
  let moveTo = { name: path };
  switch (path) {
    case 'login': // 로그인
      if (store.isAuthenticated) {
        alert('이미 로그인 중입니다!');
        return;
      }
      break;
    case 'logout': // 로그아웃. 토큰과 인증 정보를 초기화
      console.log('로그아웃 클릭됨');
      store.getLogout(); // 액션 호출
      console.log('isAuthenticated 상태: ', store.isAuthenticated.value);
      console.log('token 상태: ', store.token.value);
      moveTo = { name: 'logout' }
      break;
  }
  // 페이지 이동 시 열려있는 메뉴 전부 닫기
  showUserMenu.value = false;
  showSidebar.value = false;
  router.push(moveTo);
};

.
.
.
</script>

LogoutPage.vue

<template>
  <div>
    로그아웃 페이지
    <p>3초 뒤 메인 페이지로 이동합니다.</p>
    <p>{{ timerCount }}</p>
  </div>
</template>

<script setup>
import { onMounted, watch, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from "@/store/auth";

const store = useAuthStore();
const router = useRouter();
const timerCount = ref(3);

onMounted(() => {
  console.log("토큰이랑 인증정보 : ", store.token, store.isAuthenticated)

  const countdown = setInterval(() => {
    timerCount.value--;
    if (timerCount.value === 0) {
      clearInterval(countdown);
      router.push({ name: 'main' });
    }
  }, 1000);
});

</script>

<style scoped></style>

<style lang="scss" scoped></style>

// src/store/auth.js
import { defineStore } from "pinia";
import { login } from "@/auth/login.js";
import { ref } from "vue";

export const useAuthStore = defineStore("auth", () => {
  const isAuthenticated = ref(false);
  const token = ref("");
  const userEmail = ref("");
  const password = ref("");

  const getToken = async () => {
    token.value = await login(userEmail.value, password.value);
    if (token.value !== "") {
      // 로그인 성공시
      isAuthenticated.value = true;
    } else {
      // 로그인 실패
      token.value = "";
      isAuthenticated.value = false;
    }
  };

  const getLogout = () => {
    token.value = "";
    isAuthenticated.value = false;
    userEmail.value = "";
    password.value = ""; 
  };

  return { getLogout, getToken, isAuthenticated, token, userEmail, password };
});

로그아웃 버튼을 클릭하면 페이지 이동과 함께 pinia의 auth Store에 있는 [isAuthenticated] 와 [token]을 초기화 하는 코드를 작성하였다.

store의 action으로

• getToken(비동기 로그인 처리 → 토큰 받아오기 & 인증 정보 true)
• getLogout(토큰과 인증 정보를 초기화)

두 함수를 정의해, vue 컴포넌트에서 action을 호출해 사용하도록 정의하였다.

로그인의 경우 문제없이 잘 잘동했지만, 로그아웃이 안되는 문제가 발생했다.

로그인/로그아웃 여부에 따라 메인페이지의 요소가 달라지는데, 로그아웃이 안되니 많은 문제가 발생했다.

문제 해결을 위한 시도로 아래와 같은 방법을 시도해보았다.

1. store의 값을 vue에서 반응형으로 사용하기 위해 storeToRefs 객체 사용