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'],
  // 或 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 樹沒有不同，否則可能會發生錯誤。