无法将中间件与 Firebase 和 NuxtJS 3 一起使用

我正在尝试在示例项目中使用 Firebase 身份验证。身份验证按预期工作，但是一旦我想使用中间件来阻止用户访问管理页面或在已经登录的情况下访问登录页面，这是不可能的。

我已经尝试了几个小时，但没有任何效果。

这是我的package.json:

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.6"
  },
  "dependencies": {
    "firebase": "^9.9.2"
  }
}

My App.vue

<template>
  <div>
    <NuxtPage />
  </div>
</template>

我的文件夹：

app.vue
nuxt.config.ts
package.json
...
pages/
-- index.vue
-- login.vue
-- register.vue
composables/
-- useFirebase.ts
-- useFirebaseUser.ts
plugins/
-- firebase.client.ts

useFirebase.ts仅包含 Firebase 函数。

useFirebaseUser here:

import type {User} from "firebase/auth";

export const useFirebaseUser = (init?:User|null) => useState<User|null>("user", () => init ?? null);

Now my firebase.client.ts plugin:

import { initializeApp } from "firebase/app";
import { onAuthStateChanged, getAuth } from "firebase/auth";

export default defineNuxtPlugin(async (nuxtApp) => {
    const firebaseConfig = {
        // ...
    };

    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);
    const firebaseUser = useFirebaseUser(auth.currentUser);
    onAuthStateChanged(auth, (user) => {
        console.log("auth state changed =", user);
        firebaseUser.value = user;
    });
});

我尝试过使用addRouteMiddleware在插件内，但使用它的页面说它不存在......

我试图在中声明一个中间件middleware目录和使用getAuth()来自 Firebase，但它说没有初始化 Firebase 应用程序。我认为插件是在中间件之后加载的。

我尝试通过以下方式提供变量：

return {
 provide: { auth: () => getAuth(app) }
}

在插件的末尾，但当我通过中间件访问它时，它说“$auth”不是一个函数useNuxtApp.

我也尝试过：

nuxtApp.provide("auth", getAuth(app))

这根本不起作用getAuth().currentUser获取其值一次onAuthStateChanged在页面加载后执行，使其无用，因为它总是给出null or undefined.

有人知道使用 Firebase 身份验证中间件的神奇方法吗？