121. Initializing Firebase First

vue cli start 링크open in new window

npm create vue@latest

프로젝트 링크

웹 애플리케이션에서 계정을 등록하고 자동으로 로그인되는 상황에서, 페이지를 새로고침하면 사용자 인증이 유지되지 않는 문제에 대한 해결 방법을 설명하도록 하겠다.

문제 상황: 사용자가 계정을 등록하면 시스템에 자동으로 로그인되지만, 페이지를 새로고침하면 인증 상태가 유지되지 않는 문제가 있다.
Firebase 역할: Firebase SDK가 로컬 시스템에 토큰을 저장하여 인증을 관리한다.
Vue 애플리케이션의 상태 관리: 페이지 새로고침 시 Vue 애플리케이션의 상태가 초기화되고, '로그인 상태'가 false로 된다.
해결 방법:
1. Firebase를 Vue 애플리케이션보다 먼저 로드해야 한다. Firebase가 초기화되지 않으면 사용자 로그인 여부를 확인할 수 없다.
2. Vue 애플리케이션이 초기화된 후 토큰을 확인하고, 토큰이 유효하면 상태 속성을 true로 설정해야 한다.
구현 방법:
- Firebase 파일을 import하고 인증 객체를 가져온다.
- Firebase 인증 서비스가 준비되었는지 기다린다.
- 인증 상태 변경 이벤트를 수신하여 사용자가 로그인되어 있는지 확인한다.
- Vue 인스턴스를 이 이벤트 콜백 함수 내부에 배치하여, 이벤트가 여러번 발생해도 Vue 애플리케이션이 한 번만 초기화되도록 한다.

이러한 접근 방식을 통해 애플리케이션이 시작될 때 사용자가 인증되었는지 확인하고, 애플리케이션이 초기화된 후에도 사용자 인증 상태를 유지할 수 있습니다.
다음엔 애플리케이션이 초기화된 후 사용자 인증 여부를 확인하는 방법에 대해 다루도록 하겠습니다.

src/main.ts

// CSS 스타일시트를 임포트합니다. 이는 전역 스타일을 정의합니다.
import './assets/base.css'
import './assets/main.css'

// Vue 3와 Pinia 상태 관리 라이브러리를 임포트합니다.
import { createApp } from 'vue'
import { createPinia } from 'pinia'

// Vue의 App 타입을 임포트합니다. 이는 TypeScript 타입 체크에 사용됩니다.
import type { App as AppType } from 'vue'
// App.vue 컴포넌트를 임포트합니다. 이는 애플리케이션의 루트 컴포넌트입니다.
import App from './App.vue'
// Vue 라우터 인스턴스를 임포트합니다. 페이지 라우팅을 관리합니다.
import router from './router'
// VeeValidate 플러그인을 임포트합니다. 폼 검증을 위한 플러그인입니다.
import VeeValidatePlugin from './includes/validation'
// Firebase 인증 모듈을 임포트합니다.
import { auth } from './includes/firebase'

// Vue 애플리케이션 인스턴스를 저장할 변수를 선언합니다. 초기값은 null입니다.
let app: AppType | null = null

// Firebase 인증 상태가 변경될 때 실행될 콜백 함수를 정의합니다.
auth.onAuthStateChanged(() => {
  // app 변수가 null인 경우에만 Vue 애플리케이션을 생성합니다.
  if (!app) {
    // Vue 애플리케이션을 생성합니다.
    app = createApp(App)

    // Pinia를 애플리케이션에 추가합니다. 상태 관리를 위함입니다.
    app.use(createPinia())
    // Vue 라우터를 애플리케이션에 추가합니다.
    app.use(router)
    // VeeValidate 플러그인을 애플리케이션에 추가합니다. 주석 처리된 부분은 추가 옵션을 전달하는 예시입니다.
    // app.use(VeeValidatePlugin, { foo: 100 })
    app.use(VeeValidatePlugin)

    // Vue 애플리케이션을 DOM의 '#app' 요소에 마운트합니다.
    app.mount('#app')
  }
})

위 코드는 Vue3와 Firebase를 사용한 인증 시스템을 포함하는 웹 애플리케이션의 초기화 및 설정 과정을 보여준다.
Firebase의 인증 상태가 변경될 때마다 콜백 함수가 실행되며, 애플리케이션이 아직 초기화되지 않았다면 Vue 애플리케이션을 생성하고 필요한 플러그인과 라우터를 설정한다.

# 121. Initializing Firebase First

121. Initializing Firebase First