我正在开发一个具有简单身份验证的 Nuxt SSR 应用程序。

我有 auth middleware 来保护所有登录所需的路由。

export default defineNuxtRouteMiddleware(async (to, from) => {
  if (process.client) {
    const authStore = useAuthStore()

    if (!authStore.check) {
      authStore.returnUrl = to.fullPath

      useRouter().push('/admin/login')
    }
  }
})

该中间件检查存储中的浏览器 cookie，因此需要在客户端运行

export const useAuthStore = defineStore('auth', () => {
  const token = ref(useStorage('token', null))
  const check = computed(() => token.value !== undefined)
  ....

据我了解，通常SSR中间件先运行在服务器端，然后运行在客户端。

问题是，当我应用此身份验证 miidleware 来保护需要登录的页面时

<script setup lang="ts">
definePageMeta({
  middleware: ['admin-auth'],
  // or middleware: 'auth'
})
</script>

<template>
  <div class="flex justify-center items-center h-screen p-3">admin 1</div>
</template>

中间件将首先在服务器端运行，导致页面无意渲染，然后用逻辑触发客户端，并将其重定向回登录页面。这是非常丑陋的。您可以看到它的实际效果。

有人遇到过这个问题吗？任何解决方案都会非常感激。我的要求是为此应用程序使用 SSR。

另外，还有一个小问题。当运行 SSR 并刷新页面时，会出现一些样式闪烁。我不知道为什么。我正在使用这个模板 https://github.com/sfxcode/nuxt3-primevue-starter

我已经寻找解决方案好几天了@_@