Le middleware serveur/client Nuxt3 SSR entraîne le rendu inattendu de la page protégée

Question

Je développe une application Nuxt SSR avec authentification simple.

J'ai un middleware d'authentification pour sécuriser tous les itinéraires requis pour la connexion.

export par défaut finishNuxtRouteMiddleware(async (to, from) => {
  si (processus.client) {
    const authStore = useAuthStore()

    si (!authStore.check) {
      authStore.returnUrl = vers.fullPath

      useRouter().push('/admin/login')
    }
  }
})</pré>
<p>Ce middleware vérifie les cookies de navigateur stockés et doit donc être exécuté sur le client</p>
<pre class="brush:php;toolbar:false;">export const useAuthStore = definitionStore('auth', () => {
  jeton const = ref(useStorage('token', null))
  const check = calculated(() => token.value !== non défini)
  ....</pré>
<p>Pour autant que je sache, le middleware SSR s'exécute généralement d'abord sur le serveur, puis sur le client. </p>
<p>Le problème est lorsque j'applique ce logiciel d'authentification pour protéger les pages qui nécessitent une connexion</p>
<pre class="brush:php;toolbar:false;"><configuration du script lang="ts">
définirPageMeta({
  middleware : ['admin-auth'],
  // ou middleware : 'auth'
})
</script>

<modèle>
  <div class="flex justifier-centre éléments-centre h-écran p-3">admin 1</div>
</template>

Le middleware s'exécutera d'abord côté serveur, provoquant le rendu involontaire de la page, puis déclenchera le client avec une logique et le redirigera vers la page de connexion. C'est très moche. Vous pouvez le voir en action.

Quelqu'un a-t-il rencontré ce problème ? Toute solution serait très appréciée. Mon exigence est d'utiliser SSR pour cette application.

Il y a également un petit problème. Lors de l'exécution de SSR et de l'actualisation de la page, un certain style scintille. Je ne sais pas pourquoi. J'utilise ce modèle https://github.com/sfxcode/nuxt3-primevue-starter

Je cherchais une solution depuis plusieurs jours@_@

Answer 1

De manière générale, il n'est pas nécessaire d'utiliser « SSR » pour les pages protégées, car seules les pages publiques doivent être indexées par les moteurs de recherche. En mode SSR, vous pouvez accéder aux données stockées dans les cookies. Pour les obtenir, il est plus pratique d'utiliser une bibliothèque spéciale pour gérer les cookies, de sorte que tous les cas possibles ne soient pas spécifiés dans le SRR ou le CSR. Pour Nuxt 2, j'utilise la bibliothèque cookie-universal-nuxt. Essayez de vous assurer que les arborescences DOM du serveur et du client ne sont pas différentes, sinon des erreurs pourraient survenir.