Die Nuxt3 SSR-Server-/Client-Middleware führt dazu, dass geschützte Seiten unerwartet gerendert werden

Question

Ich entwickle eine Nuxt SSR-Anwendung mit einfacher Authentifizierung.

Ich habe auth middleware, um alle für die Anmeldung erforderlichen Routen zu sichern.

export default defineNuxtRouteMiddleware(async (to, from) => {
  if (process.client) {
    const authStore = useAuthStore()

    if (!authStore.check) {
      authStore.returnUrl = to.fullPath

      useRouter().push('/admin/login')
    }
  }
})

Diese Middleware prüft auf gespeicherte Browser-Cookies und muss daher auf dem Client ausgeführt werden

export const useAuthStore = defineStore('auth', () => {
  const token = ref(useStorage('token', null))
  const check = berechnet(() => token.value !== undefiniert)
  ....

Soweit ich weiß, läuft die SSR-Middleware normalerweise zuerst auf der Serverseite und dann auf der Clientseite.

Das Problem besteht darin, dass ich diese Authentifizierungs-Midleware anwende, um Seiten zu schützen, die eine Anmeldung erfordern

<script setup lang="ts">
definePageMeta({
  Middleware: ['admin-auth'],
  // oder Middleware: 'auth'
})
</script>

<Vorlage>
  <div class="flex justify-center items-center h-screen p-3">admin 1</div>
</template>

Die Middleware wird zuerst auf der Serverseite ausgeführt, was dazu führt, dass die Seite unbeabsichtigt gerendert wird, und löst dann den Client mit Logik aus und leitet ihn zurück zur Anmeldeseite. Das ist sehr hässlich. Sie können es in Aktion sehen.

Ist jemand auf dieses Problem gestoßen? Jede Lösung wäre sehr dankbar. Meine Anforderung besteht darin, SSR für diese Anwendung zu verwenden.

---

Außerdem gibt es ein kleines Problem. Beim Ausführen von SSR und Aktualisieren der Seite kommt es zu einem gewissen Stilflackern. Ich weiß nicht, warum. Ich verwende diese Vorlage https://github.com/sfxcode/nuxt3-primevue-starter

---

Ich habe mehrere Tage nach einer Lösung gesucht@_@

Answer 1

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