我正在开发一个带有简单身份验证的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中间件首先在服务器端运行，然后在客户端运行。
问题是，当我应用这个认证中间件来获得一个需要登录的页面时

<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>

中间件将首先在服务器端运行，导致页面无意中呈现，然后用逻辑触发客户端，它将重定向回登录页面。这是非常ulgy。你可以看到它在行动。

以前有人遇到过这个问题吗？任何解决方案都值得赞赏。我的要求是为这个应用程序使用SSR。
另外，还有一个小问题。当运行SSR并刷新页面时，会出现一些风格问题。我不知道为什么我正在使用这个模板https://github.com/sfxcode/nuxt3-primevue-starter

我已经找了好几天了@_@