如何在Nuxt 3中通过全局中间件实现维护模式？

Question

我正在尝试在我的 Nuxt 3 应用程序中实现维护模式。我创建了一个中间件（

maintenance.global.ts

），我想在每个页面调用和更改上运行它，无论是通过

nuxt-link

还是

router-link

。但是，我遇到了一个问题，即中间件仅在重新加载页面时运行，并且当通过

nuxt-link

更改页面时不会调用它。

示例：

我首先访问“http://localhost:3000”，当启用维护模式时，我会自动重定向到“/status/maintenance”。但是，如果我使用

nuxt-link

导航到另一个页面（例如“/legal/imprint”），然后尝试返回索引页面，我将不再重定向并保留在“http://localhost:3000”上。

这是我的中间件的代码：

~/middleware/maintenance.global.ts

export default defineNuxtRouteMiddleware((to, from) => {
    let isMaintenance = process.env.MAINTENANCE;
    let allowedRoutes = [
        '/status/maintenance',
        '/legal/imprint'
    ];

    if (!isMaintenance) return;

    if (isMaintenance === 'true' && !allowedRoutes.includes(to.path)) {
        return navigateTo('/status/maintenance');
    } else if (isMaintenance === 'false' && to.path === '/status/maintenance') {
        return navigateTo('/');
    }
})

这是我的

~/.env

文件的内容：

~/.env

MAINTENANCE=true

我想确保使用

nuxt-link

更改页面时维护中间件运行。什么可能导致此问题，如何使中间件按预期工作？

Answer 1

您正在尝试访问中间件中的

process.env

变量。据我了解，只有服务器端可以通过这种方式访问环境变量，这就是为什么在页面加载时中间件可以工作，因为页面是在服务器端渲染的。

如何解决此问题需要执行以下操作：

.env:

NUXT_PUBLIC_IS_MAINTENANCE=true

nuxt.config.ts：

runtimeConfig: {
  // ...
  public: {
    // ...
    isMaintenance: ''
  }
}

~/middleware/maintenance.global.ts:

export default defineNuxtRouteMiddleware((to, from) => {
    const config = useRuntimeConfig()

    const isMaintenance = config.public.isMaintenance as unknown as boolean
    // ...
})

我注意到的一件事是，配置值将是一个实际的布尔值而不是字符串

'true' | 'false'

，但 TypeScript 声明仍然期望获得一个字符串并会抱怨。这就是

as unknown as boolean

的原因。