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

Question

我正在尝试在示例项目中使用 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"
  }
}

我的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这里：

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

现在我的firebase.client.ts插件：

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

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

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

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

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

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;
    });
});

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

我也尝试过：

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

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

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