Nuxt3 SSR 服务器/客户端中间件导致受保护页面无意呈现

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 中间件首先在服务器端运行，然后在客户端运行。

问题是，当我应用此 auth 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 模式下，您可以访问存储在 cookies 中的数据。 要获得它们，最方便的是使用与 cookies 一起使用的特殊库，以免在您处于 SRR 或 CSR 时规定所有可能的情况。 对于 Nuxt 2，我使用 cookie-universal-nuxt 库。 尽量确保 DOM 树在服务器和客户端上没有差异，否则可能会出现错误。