今天這個章節要把之前做登入時，保存登入狀態的功能完成；回顧一下登入，在[Day 16] 開始第個頁面：登入/註冊頁 ＋ Firebase: Authentication時，用firebase來做登入功能，用firebase提供的signInWithEmailAndPasswordapi做登入的動作。

我設定的商業邏輯是：不管登入與否都可以瀏覽整個網頁，及將商品加到購物車，但是要結帳，進入結帳頁面則需要登入。而今天則是要在middleware用登入的狀態來判斷，是否能進入結帳頁面。

目錄

• composable - useAuthUser.ts
• middleware - auth.ts
• 設定purchaseOrder.vue user沒登入就導向登入頁

composable - useAuthUser.ts

首先需要一個建立composable-useAuthUser.ts判斷user是否已經登入：

// ./composables/useAuthUser.ts
import { onAuthStateChanged, type Auth, type User } from 'firebase/auth';

export const useAuthUser = () => {
    const { $auth } = useNuxtApp();
    const user: Ref<User | null> = ref(null);

    onMounted(() => {
        // onAuthStateChanged文件在這邊: https://firebase.google.com/docs/auth/web/manage-users#get_the_currently_signed-in_user
        onAuthStateChanged($auth as Auth, (currentUser) => {
            if (currentUser) {
                user.value = currentUser;
            } else {
                user.value = null;
            }
        });
    });

    return user;
};

middleware - auth.ts

建立middleware，這邊邏輯很簡單，沒登入就導到登入頁:

// ./middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
    const user = useAuthUser();

    if (!user.value) {
        return navigateTo('/login');
    }
});

設定purchaseOrder.vue user沒登入就導向登入頁

像前面提到自定義的商業邏輯，只有到結帳頁面會判斷是否登入，沒登入就導向登入頁，所以到結帳頁面加入middleware的auth邏輯:

// .pages/purchaseOrder.vue
<script setup lang="ts">
import auth from '~/middleware/auth';

...

definePageMeta({
  middleware: [
    auth
  ]
});
</script>