Perisian tengah pelayan/klien Nuxt3 SSR menyebabkan halaman yang dilindungi dipaparkan secara tidak dijangka
<p>Saya sedang membangunkan aplikasi Nuxt SSR dengan pengesahan mudah. </p>
<p>Saya mempunyai <code>auth middleware</code> untuk menjamin semua laluan yang diperlukan untuk log masuk. </p>
<pre class="brush:php;toolbar:false;">export default defineNuxtRouteMiddleware(async (to, from) => {
jika (process.client) {
const authStore = useAuthStore()
jika (!authStore.check) {
authStore.returnUrl = to.fullPath
useRouter().push('/admin/login')
}
}
})</pre>
<p>Perisian tengah ini menyemak kuki penyemak imbas yang disimpan dan oleh itu perlu dijalankan pada klien</p>
<pre class="brush:php;toolbar:false;">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></pre>
<p>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. </p>
<p>Adakah sesiapa yang menghadapi masalah ini? Sebarang penyelesaian akan sangat dihargai. Keperluan saya ialah menggunakan SSR untuk aplikasi ini. </p>
<hr />
<p>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</p>
<hr />
<p>Saya telah mencari penyelesaian selama beberapa hari@_@</p>
