Perisian tengah pelayan/klien Nuxt3 SSR menyebabkan halaman yang dilindungi dipaparkan secara tidak dijangka

Question

Saya sedang membangunkan aplikasi Nuxt SSR dengan pengesahan mudah.

Saya mempunyai auth middleware untuk menjamin semua laluan yang diperlukan untuk log masuk.

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

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

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

Perisian tengah ini menyemak kuki penyemak imbas yang disimpan dan oleh itu perlu dijalankan pada klien

export const useAuthStore = defineStore('auth', () => {
  token const = ref(useStorage('token', null))
  semakan const = dikira(() => token.value !== tidak ditentukan)
  ....</pra>
<p>Setahu saya, biasanya perisian tengah SSR dijalankan pertama di bahagian pelayan dan kemudian di bahagian klien. </p>
<p>Masalahnya ialah apabila saya menggunakan perisian miidle pengesahan ini untuk melindungi halaman yang memerlukan log masuk</p>
<pre class="brush:php;toolbar:false;"><script setup lang="ts">
definePageMeta({
  perisian tengah: ['admin-auth'],
  // atau middleware: 'auth'
})
</skrip>

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

Perisian tengah akan mula-mula dijalankan di bahagian pelayan, menyebabkan halaman dipaparkan secara tidak sengaja, dan kemudian mencetuskan klien dengan logik dan mengubah hala semula ke halaman log masuk. Ini sangat hodoh. Anda boleh melihatnya dalam tindakan.

Adakah sesiapa yang menghadapi masalah ini? Sebarang penyelesaian akan sangat dihargai. Keperluan saya ialah menggunakan SSR untuk aplikasi ini.

---

Selain itu, terdapat masalah kecil. Apabila menjalankan SSR dan menyegarkan halaman, terdapat beberapa gaya yang berkelip-kelip. Saya tidak tahu mengapa. Saya menggunakan templat ini https://github.com/sfxcode/nuxt3-primevue-starter

---

Saya telah mencari penyelesaian selama beberapa hari@_@

Answer 1

Secara amnya, tidak perlu menggunakan "SSR" untuk halaman yang dilindungi, kerana hanya halaman awam perlu diindeks oleh enjin carian. Dalam mod SSR anda boleh mengakses data yang disimpan dalam kuki. Untuk mendapatkannya, adalah paling mudah untuk menggunakan perpustakaan khas untuk mengendalikan kuki, supaya tidak semua kes yang mungkin dinyatakan dalam SRR atau CSR. Untuk Nuxt 2, saya menggunakan perpustakaan cookie-universal-nuxt. Cuba pastikan bahawa pokok DOM pelayan dan pelanggan tidak berbeza, jika tidak ralat mungkin berlaku.