7. Esempio [nuxt-04]: mantenimento di una sessione client/server

Il progetto [nuxt-04] affronta il problema del mantenimento di una sessione client/server. Riprendiamo il progetto [nuxt-03] con le seguenti modifiche:

• la pagina [index] avrà un pulsante che consentirà di incrementare il contatore dello store [Vuex];
• la pagina [page1] rimane invariata;
• si vorrebbe che, quando una pagina viene richiesta manualmente al server, quest’ultimo restituisca la pagina richiesta con uno store [Vuex] il cui valore del contatore corrisponda all’ultimo valore che aveva sul lato client;

Il progetto [nuxt-04] viene inizialmente creato copiando il progetto [nuxt-03]:

Cambia solo la pagina [index]:

<!-- pagina [index] -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigazione -->
    <Navigation slot="left" />
    <!-- messaggio-->
    <template slot="right">
      <b-alert show variant="warning"> Home - value= {{ value }} </b-alert>
      <!-- pulsante -->
      <b-button @click="incrementCounter" class="ml-3" variant="primary">Incrémenter</b-button>
    </template>
  </Layout>
</template>

<script>
/* eslint-disable no-undef */
/* eslint-disable no-console */
/* eslint-disable nuxt/no-env-in-hooks */

import Layout from '@/components/layout'
import Navigation from '@/components/navigation'
export default {
  name: 'Home',
  // componenti utilizzati
  components: {
    Layout,
    Navigation
  },
  data() {
    return {
      value: 0
    }
  },
  // ciclo di vita
  beforeCreate() {
    // client e server
    console.log('[home beforeCreate]')
  },
  created() {
    // client e server
    this.value = this.$store.state.counter
    console.log('[home created], value=', this.value)
  },
  beforeMount() {
    // solo client
    console.log('[home beforeMount]')
  },
  mounted() {
    // solo client
    console.log('[home mounted]')
  },
  // gestione degli eventi
  methods: {
    incrementCounter() {
      console.log('incrementCounter')
      // incremento del contatore di 1
      this.$store.commit('increment', 1)
      // modifica del valore visualizzato
      this.value = this.$store.state.counter
    }
  }
}
</script>

• riga 10: è stato aggiunto un pulsante per incrementare il contatore del negozio [Vuex];
• riga 54: il metodo che gestisce il [clic] sul pulsante [Incrémenter];
• riga 57: il contatore dello store viene incrementato di 1;
• riga 59: il valore del contatore viene assegnato alla proprietà [value] affinché venga visualizzato dalla riga 8;

Si esegue il progetto [nuxt-04] con il seguente file [nuxt.config.js]:

// directory del codice sorgente
  srcDir: 'nuxt-04',
  // router
  router: {
    // radice dei file URL dell'applicazione
    base: '/nuxt-04/'
  },
  // server
  server: {
    // porta di servizio, 3000 per impostazione predefinita
    port: 81,
    // indirizzi di rete in ascolto, per impostazione predefinita localhost: 127.0.0.1
    // 0.0.0.0 = tutti gli indirizzi di rete del computer
    host: 'localhost'
}

All'esecuzione, la prima pagina visualizzata è la seguente:

Premendo più volte il pulsante [3], si ottiene la seguente nuova pagina:

Se si utilizza il link [3], si ottiene la pagina seguente:

• con [2], la pagina [page1] [1] visualizza correttamente il valore del contatore;

Ora aggiorniamo la pagina con [3]. La nuova pagina è la seguente:

• in [2], il valore corrente del contatore è andato perso. Si è tornati al valore iniziale;

Questo risultato è del tutto comprensibile se si osservano i log:

• in [1], il server ha rieseguito la funzione [nuxtServerInit]. Quest’ultima è la seguente:

/* eslint-disable no-console */
export const state = () => ({
   // contatore
  counter: 0
})

export const mutations = {
   // incremento del contatore di un valore [inc]
  increment(state, inc) {
    state.counter += inc
  }
}

export const actions = {
  async nuxtServerInit(store, context) {
     // chi esegue questo codice?
    console.log('nuxtServerInit, client=', process.client, 'serveur=', process.server)
     // si attende la conclusione di una promessa
    await new Promise(function(resolve, reject) {
       // Normalmente qui c'è una funzione asincrona
       // la simuliamo con un'attesa di un secondo
      setTimeout(() => {
         // Operazione riuscita
        resolve()
      }, 1000)
    })
     // si modifica lo store
    store.commit('increment', 53)
     // log
    console.log('nuxtServerInit commit terminé')
  }
}

La riga 28 assegna il valore 53 al contatore.

Esaminiamo la richiesta HTTP effettuata dal browser quando è stata aggiornata la pagina [page1]:

Si nota che, oltre alle pagine [page1] e [1], il client richiede al server una serie di script. Si notino gli script [pages_index, pages_page1], che sono gli script associati alle pagine [index, page]. Questi script vengono forniti ad ogni richiesta al server, indipendentemente dalla pagina richiesta;

In [1], la pagina [page1] viene richiesta al server con la seguente richiesta HTTP:

GET http://localhost:81/nuxt-04/page1
Host: localhost:81
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
DNT: 1
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Pragma: no-cache
Cache-Control: no-cache

Si nota che questa richiesta non trasmette alcuna informazione al server. Quest’ultimo non ha quindi alcun modo di conoscere lo stato dello store [Vuex] sul lato client. A tal fine, sarebbe stato necessario che il client gli inviasse tale informazione.

Nel progetto successivo [nuxt-05] utilizziamo un cookie affinché il client possa inviare informazioni al server quando quest’ultimo viene interpellato.