Die Nuxt3 SSR-Server-/Client-Middleware führt dazu, dass geschützte Seiten unerwartet gerendert werden
<p>Ich entwickle eine Nuxt SSR-Anwendung mit einfacher Authentifizierung. </p>
<p>Ich habe <code>auth middleware</code>, um alle für die Anmeldung erforderlichen Routen zu sichern. </p>
<pre class="brush:php;toolbar:false;">export default defineNuxtRouteMiddleware(async (to, from) => {
if (process.client) {
const authStore = useAuthStore()
if (!authStore.check) {
authStore.returnUrl = to.fullPath
useRouter().push('/admin/login')
}
}
})</pre>
<p>Diese Middleware prüft auf gespeicherte Browser-Cookies und muss daher auf dem Client ausgeführt werden</p>
<pre class="brush:php;toolbar:false;">export const useAuthStore = defineStore('auth', () => {
const token = ref(useStorage('token', null))
const check = berechnet(() => token.value !== undefiniert)
....</pre>
<p>Soweit ich weiß, läuft die SSR-Middleware normalerweise zuerst auf der Serverseite und dann auf der Clientseite. </p>
<p>Das Problem besteht darin, dass ich diese Authentifizierungs-Midleware anwende, um Seiten zu schützen, die eine Anmeldung erfordern</p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>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. </p>
<p>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. </p>
<hr />
<p>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</p>
<hr />
<p>Ich habe mehrere Tage nach einer Lösung gesucht@_@</p>
