我正在尝试按照文档使用会话 Cookie 来实现 Nuxt VueFire。
这是我的runtimeConfig
和
vuefire中的配置对象
nuxt.config.ts:
runtimeConfig: {
public: {
// Nuxt auto replaces values with matching .env values prefixed with NUXT_PUBLIC
brandName: "",
fbApiKey: "",
fbAuthDomain: "",
projectId: "",
fbDefaultStorageBucket: "",
fbMessagingSenderId: "",
fbAppId: "",
fbMeasurementId: "",
gcpRecaptchaEnterpriseSiteKey: "",
},
},
vuefire: {
config: {
apiKey: process.env.NUXT_PUBLIC_FB_API_KEY,
authDomain: process.env.NUXT_PUBLIC_FB_AUTH_DOMAIN,
projectId: process.env.NUXT_PUBLIC_PROJECT_ID,
storageBucket: process.env.NUXT_PUBLIC_FB_DEFAULT_STORAGE_BUCKET,
messagingSenderId: process.env.NUXT_PUBLIC_FB_MESSAGING_SENDER_ID,
appId: process.env.NUXT_PUBLIC_FB_APP_ID,
measurementId: process.env.NUXT_PUBLIC_FB_MEASUREMENT_ID,
},
auth: {
enabled: true,
sessionCookie: true,
},
appCheck: {
// Allows you to use a debug token in development
debug: process.env.NODE_ENV !== "production",
isTokenAutoRefreshEnabled: true,
provider: "ReCaptchaEnterprise",
key: process.env.NUXT_PUBLIC_GCP_RECAPTCHA_ENTERPRISE_SITE_KEY || "none",
},
},
但是当使用 App Check 和 Session Cookie 时，它会抛出以下错误。当我删除 sessionCookie: true
时它工作正常，所以这个错误肯定与会话 Cookie + 应用程序检查一起有关。我认为出现此错误是因为用于 Firebase App Check 的调试令牌通常仅在客户端环境中可用。启用
sessionCookie
后，服务器会尝试验证令牌，该令牌在服务器上下文中不可用或无效。这是当 App Check 和
sessionCookie: true
一起启用时我在屏幕上（而不是控制台）看到的错误：
500
Firebase: Error (auth/firebase-app-check-token-is-invalid.).
at _fail (/Users/BenJackGill/Dev/seoturbo/node_modules/@firebase/auth/src/core/util/assert.ts:65:9)
at _performFetchWithErrorHandling (/Users/BenJackGill/Dev/seoturbo/node_modules/@firebase/auth/src/api/index.ts:210:9)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at _performSignInRequest (/Users/BenJackGill/Dev/seoturbo/node_modules/@firebase/auth/src/api/index.ts:231:27)
at Module.signInWithCustomToken (/Users/BenJackGill/Dev/seoturbo/node_modules/@firebase/auth/src/core/strategies/custom_token.ts:56:37)
at async ./node_modules/nuxt-vuefire/dist/runtime/auth/plugin-authenticate-user.server.mjs:36:135
at async setup (./virtual:nuxt:/Users/BenJackGill/Dev/seoturbo/apps/web/.nuxt/plugins/server.mjs:58:116)
at async Object.callAsync (/Users/BenJackGill/Dev/seoturbo/node_modules/unctx/dist/index.mjs:72:16)
at async applyPlugin (/Users/BenJackGill/Dev/seoturbo/node_modules/nuxt/dist/app/nuxt.js:116:25)
此外，如果我的 Firebase 浏览器 API 密钥设置了网站限制（http://localhost:3000
和
http://localhost:3000），我会在屏幕上（而不是在控制台中）收到此错误。我认为此错误是由于 Firebase API 密钥仅限于特定域，并且由于服务器没有发送与这些域匹配的引用标头，因此请求被阻止。
当我的 Firebase 浏览器 API 密钥设置了网站限制时，我在屏幕上（而不是控制台）看到以下错误：
500
Firebase: Error (auth/requests-from-referer-<empty>-are-blocked.).
at _fail (/Users/BenJackGill/Dev/seoturbo/node_modules/@firebase/auth/src/core/util/assert.ts:65:9)
at _performFetchWithErrorHandling (/Users/BenJackGill/Dev/seoturbo/node_modules/@firebase/auth/src/api/index.ts:210:9)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at _performSignInRequest (/Users/BenJackGill/Dev/seoturbo/node_modules/@firebase/auth/src/api/index.ts:231:27)
at Module.signInWithCustomToken (/Users/BenJackGill/Dev/seoturbo/node_modules/@firebase/auth/src/core/strategies/custom_token.ts:56:37)
at async ./node_modules/nuxt-vuefire/dist/runtime/auth/plugin-authenticate-user.server.mjs:36:135
at async setup (./virtual:nuxt:/Users/BenJackGill/Dev/seoturbo/apps/web/.nuxt/plugins/server.mjs:58:116)
at async Object.callAsync (/Users/BenJackGill/Dev/seoturbo/node_modules/unctx/dist/index.mjs:72:16)
at async applyPlugin (/Users/BenJackGill/Dev/seoturbo/node_modules/nuxt/dist/app/nuxt.js:116:25)
我认为这可能与我的 auth 中间件有关，它有时会触发服务器上的调用，所以我也将其包含在这里。请注意，我尝试将其排除在服务器上运行，如文档和下面的评论所示，但没有效果：
// middleware/auth.ts
export default defineNuxtRouteMiddleware(async (to, from) => {
// I tried using this to skip middleware on initial client load. It does not work.
// const nuxtApp = useNuxtApp();
// if (
// import.meta.client &&
// nuxtApp.isHydrating &&
// nuxtApp.payload.serverRendered
// ) {
// return;
// }
// I also tried using this to skip middleware on the server. It does not work.
// if (import.meta.server) {
// return;
// }
// Get the current user
const user = await getCurrentUser();
// Redirect all logged out users login page
if (!user) {
return navigateTo({
path: "/login",
});
}
});
我该如何克服这个问题？
nuxt.config.ts我可以看到你错过了
modules: ['nuxt-vuefire', '@vueuse/nuxt']