前言

今天是開發的Day7，開發重點為：

1. 在登入頁面內加入錯誤訊息提醒使用者（之後預定開發方向：modal提醒）
2. 判斷使用者登入與否後展示頁面

實現內容

1. 使用v-if提醒使用者登入錯誤

• <template>中利用v-if與模板語法新增errMsg

 <!-- 錯誤訊息 -->
        <p v-if="errMsg" class="text-red">{{ errMsg }}</p>

• 在<script setup>中定義errMsg，以及跟註冊差不多步驟一樣應用firebase本身的語法（signInWithEmailAndPassword）
• 再透過catch / error 和 switch 捕捉各種情況下的錯誤訊息後，提醒使用者

/**
 * 登入function與error code
 */

const errMsg = ref()

const SignIn = () => {
  const auth = getAuth()
  signInWithEmailAndPassword(auth, userInfo.value.email, userInfo.value.pwd)
    .then((data) => {
      // 利用firebase的語法登入
      console.log("successfully Signin", auth.currentUser, data)
      // 登入後回到Homepage
      pushToOtherPage("HomePage")
    })
    .catch((error) => {
      console.error("Login Fail: ", error.code)
      // 按照各種條件跳出不同的錯誤訊息
      switch (error.code) {
        case "auth/invalid-email":
          errMsg.value = "Invalid email"
          break
        case "auth/user-not-found":
          errMsg.value = "No account with that email was found"
          break
        case "auth/wrong-password":
          errMsg.value = "Incorrect password"
          break
        case "auth/too-many-requests":
          errMsg.value = "too-many-requests"
          break
        default:
          errMsg.value = "Email or password was incorrect"
          break
      }
      // 顯示訊息給使用者
    })
}

• 成功後就會顯示成功登入的訊息，以及進入HomeView
  

2. 判斷使用者登入與否，並加入sighOut按鈕

• 在HomeView中加入signOut按鈕，如果使用者是登入狀態時才會顯示
  

   <button
      v-bind:class="[customizeStyle(buttonCustomizaStyleAttribute)]"
      @click="SignOut"
      v-if="isLoggedIn"
    >
      Sign out
    </button>

import { onMounted } from "vue"
import { getAuth, onAuthStateChanged } from "firebase/auth"

const isLoggedIn = ref(false)

let auth
onMounted(() => {
  auth = getAuth()
  onAuthStateChanged(auth, (user) => {
    if (user) {
      isLoggedIn.value = true
    } else {
      isLoggedIn.value = false
    }
  })
})

為什麼使用onMounted？

注册一个回调函数，在组件挂载完成后执行。

这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端执行。
这个钩子在服务器端渲染期间不会被调用。
來源：官方文件—生命週期鉤子

使用 onMounted 的主要目的是確保初始化時可以獲取身份驗證狀態，並在組件生命周期的正確階段設置相應的事件監聽器。

1. 組件安裝到 DOM 中（mounted）。
2. onMounted 鉤子被觸發，執行內部的回調函數。
3. 在回調函數內，獲取身份驗證實例（auth）並調用 onAuthStateChanged。
4. onAuthStateChanged 設置一個監聽器，以便在身份驗證狀態發生變化時執行相應的回調函數。
5. 如果用戶已經登錄（user 對象存在），將 isLoggedIn.value 設置為 true；否則，設置為 false。

確保了在組件安裝到 DOM 之後，立即獲取當前身份驗證狀態，並在以後的變化中保持同步。

3. 在載入頁面時，判斷登入與否並將使用者導入不同網站

• 按下登出後，即回到登入頁面

/**
 * 驗證使用者是否是登入狀態
 */
import { createApp } from "vue"
import App from "../App.vue"
import { onAuthStateChanged } from "firebase/auth"
import { auth } from "../firebaseConfig.js" // Firebase auth 實例

const app = createApp(App)

// 在 Vue 3 中，需要使用 provide 和 inject 來全局訪問 auth 實例
app.provide("auth", auth)

// 在應用程序初始化時監聽用戶的身份狀態變化
onAuthStateChanged(auth, (user) => {
  if (user) {
    // 用戶已經登錄，可以執行相應的處理
    console.log("User is logged in:", user)

    // 根據用戶的身份狀態進行相應的導航
    // 在已經登入的狀態下，導入HomePage
    router.push({ name: "HomePage" }) // 導向已驗證的頁面
  } else {
    // 用戶未登錄或登出的情況下，導入LoginPage
    console.log("User is logged out")
    router.push({ name: "LoginPage" })
  }
})

下階段目標

• 另創驗證頁面：
  利用firebase本身提供的驗證服務，將註冊完使用者分成驗證完與未驗證，再分別導入不同頁面
• 不強迫使用者認證，但需要分別讓完成驗證與否的使用者使用的功能有差異

總結

大致完成了跳轉頁面的功能，但仍需要拆分firebase本身的功能，希望能讓代碼更精簡。