Vue로 PWA 개발, 프론트엔드 공부 my-pwa-app의 로그인

Vue로 PWA 개발 - 그랜파 개발자.

 

딸랑 이메일과 비밀번호로 구글 계정을 만들고는 회원 가입을 만들었다고 하네요.. ㅎㅎㅎ
회원 정보 관련해서 추후에 뭔가를 추가하도록 하지요

 

지금은 로그인, 로그아웃, 자동 로그인, 로그인 상태 확인 등을 만들고 이해해 봅시다.

이메일과 비밀번호를 입력하면 로그인이 될 것이고, 로그아웃하지 않은 상태에서 my-pwa-app를 종료하였다면 다음에 접속할 때는 자동으로 로그인하도록 합니다. 로그인하면 로그아웃 아이콘을 나타내어 로그아웃을 할 수 있도록 합니다.

1. 로그인, 로그아웃

먼저 로그인과 로그아웃을 만들어 봅시다.

 

2. Login - signInWithEmailAndPassword

로그인은 signInWithEmailAndPassword를 사용합니다.

signInWithEmailAndPassword는 Firebase Authentication에서 제공하는 메서드로, 사용자가 이메일과 비밀번호를 사용해 로그인할 수 있도록 도와줍니다. 이 메서드는 Firebase 프로젝트에 저장된 인증 정보와 입력된 사용자 정보를 비교하여 인증을 처리합니다.

로그인 성공 시 UserCredential 객체를 반환하고 이것은 회원 가입할 때 사용한 createUserWithEmailAndPassword가 반환하는 것과 같은 객체입니다.

다양한 상황에서 발생할 수 있는 주요 에러 코드는 다음과 같습니다:

• auth/email-already-in-use: 이메일이 이미 다른 계정에 사용 중.
• auth/invalid-email: 이메일 형식이 잘못됨.
• auth/operation-not-allowed: 이메일 및 비밀번호 계정이 비활성화됨.
• auth/weak-password: 비밀번호가 너무 약함.

3. Logout - signOut

logout은 signOut을 사용합니다.
signOut 메서드는 Firebase Authentication에서 사용자를 로그아웃하는 기능을 제공합니다. 이 메서드는 현재 로그인된 사용자의 인증 세션을 종료하고, 클라이언트 측에서 저장된 인증 토큰을 삭제합니다. 이를 통해 사용자가 안전하게 로그아웃할 수 있습니다.

4. LoginForm.vue - Login

<!-- src/views/LoginForm.vue -->
<template>
  <v-card>
    <v-card-title>Login</v-card-title>
    <v-card-text>
      <v-form @submit.prevent="doLogin">
        <v-text-field v-model="email" label="Email" type="email" required></v-text-field>
        <v-text-field v-model="password" label="Password" type="password" required></v-text-field>
        <v-btn type="submit" color="primary">Login</v-btn>
      </v-form>
    </v-card-text>
  </v-card>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      email: '',
      password: '',
    };
  },
  methods: {
    ...mapActions('auth', ['login']),
    async doLogin() {
      await this.login({ email: this.email, password: this.password });
    }    
  },
};
</script>

5. App.vue - Logout

<!-- src/App.vue -->
<template>
  <v-app>
    <!-- App Bar -->
    <v-app-bar color="primary" dark app>
      <v-app-bar-nav-icon @click="toggleDrawer" />
      <v-toolbar-title>My App</v-toolbar-title>
      <v-spacer></v-spacer>
      <div @click="doLogout" v-if="user" style="cursor: pointer">
        <v-icon left class="ml-1">mdi-logout</v-icon>
      </div>
    </v-app-bar>
    . . .
  </v-app>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import router from '@/router';

export default {
     methods: {
    ...mapActions('auth', ['logout']),
    doLogout() {
      this.logout();

      if(this.$route.name !== 'home')
        router.push("/");   // home으로
    },
  },
. . .
</script>

6. store - auth.js

login, logout

// src/store/modules/auth.js
async login({ commit }, { email, password }) {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    //this.$emit('user-logged-in', userCredential.user); // 부모로 로그인 이벤트 전달
    commit("setUser", userCredential.user);
    router.push("/");   // home으로
  } catch (error) {
    alert(error.message); // 에러 메시지 표시
  }
},

async logout({ commit }) {
  try {
    await signOut(auth);
    commit("setUser", null);
    alert("User logged out");
    router.push("/");   // home으로
  } catch (error) {
    alert("Error logging out:" + error.message);
  }
}

 

Vue 프로젝트 Beta Test : mylog, 일상의 기록