Nuxt3 SSR server/client middleware导致受保护页面意外渲染

Question

我正在开发一个具有简单身份验证的 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

---

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

Answer 1

一般情况下，受保护的页面没有必要使用“SSR”，因为只有公共页面才需要为搜索引擎建立索引。 在SSR模式下，您可以访问存储在cookie中的数据。要获得它们，最方便的是使用特殊的库来处理 cookie，这样就不会在 SRR 或 CSR 中规定所有可能的情况。 对于 Nuxt 2，我使用 cookie-universal-nuxt 库。 尽量确保服务器和客户端的 DOM 树没有不同，否则可能会出现错误。