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 樹在服務器和客戶端上沒有差異，否則可能會出現錯誤。