20. [개발] 로그인 후 채팅방 이동 - Vue3 Firebase 프로젝트 채팅앱 VSignal

실시간 채팅앱 VSignal 1:1 채팅

로그인 성공 후 채팅방 페이지(/chat)로 이동하도록 기능을 추가합니다.

1. 채팅방 페이지(ChatView.vue) 생성

먼저, 로그인 후 이동할 채팅방 페이지를 만들어야 해.
src/views/ChatView.vue 파일을 생성하고 아래 코드를 추가해줘.

<!-- src/views/ChatView.vue -->
<template>
  <v-container class="fill-height d-flex justify-center align-center">
    <v-card class="pa-5" width="400">
      <v-card-title class="text-center text-h5">채팅방</v-card-title>
      <v-btn color="red" block class="mt-3" @click="handleLogout">로그아웃</v-btn>
    </v-card>
  </v-container>
</template>

<script>
import { logout } from "@/firebase";
import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();

    const handleLogout = async () => {
      await logout();
      router.push("/"); // 로그아웃 시 로그인 페이지로 이동
    };

    return { handleLogout };
  },
};
</script>

2. 로그인 후 채팅방 페이지로 이동

이제 AuthView.vue에서 로그인 성공 시 채팅방으로 이동하도록 변경할게.

<!-- src/views/AuthView.vue -->
<template>
  <v-container class="fill-height d-flex justify-center align-center">
    <v-card class="pa-5" width="400">
      <v-card-title class="text-center text-h5 mb-4">
        {{ isLogin ? "로그인" : "회원가입" }}
      </v-card-title>
      <v-form @submit.prevent="handleSubmit">
        <v-text-field v-model="email" label="이메일" type="email" required />
        <v-text-field v-model="password" label="비밀번호" type="password" required />
        <v-btn type="submit" color="primary" block class="mt-3">
          {{ isLogin ? "로그인" : "회원가입" }}
        </v-btn>
      </v-form>
      <v-btn variant="text" block class="mt-2" @click="isLogin = !isLogin">
        {{ isLogin ? "회원가입 하러가기" : "로그인 하러가기" }}
      </v-btn>
    </v-card>
  </v-container>
</template>

<script>
import { ref } from "vue";
import { register, login } from "@/firebase";
import { useRouter } from "vue-router";

export default {
  setup() {
    const email = ref("");
    const password = ref("");
    const isLogin = ref(true);
    const router = useRouter();

    const handleSubmit = async () => {
      try {
        if (isLogin.value) {
          await login(email.value, password.value);
          alert("로그인 성공!");
        } else {
          await register(email.value, password.value);
          alert("회원가입 성공!");
        }

        // 로그인 또는 회원가입 성공 시 채팅방으로 이동
        router.push("/chat"); 

      } catch (error) {
        alert(error.message);
      }
    };

    return { email, password, isLogin, handleSubmit };
  },
};
</script>

3. 라우터에 채팅방 경로 추가

이제 router.js에 채팅방 페이지 경로를 추가해야 해

// src/router.js
import { createRouter, createWebHistory } from "vue-router";
import AuthView from "@/views/AuthView.vue";
import ChatView from "@/views/ChatView.vue";

const routes = [
  { path: "/", component: AuthView },
  { path: "/chat", component: ChatView },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

4. 실행 및 테스트

npm run dev 

 

이메일 & 비밀번호 입력 후 로그인하면 자동으로 채팅방 페이지(/chat)로 이동해야 해!

 

로그아웃을 누르면 다시 로그인 페이지로 돌아와야 해!