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

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

• la pagina [index] avrà un pulsante che incrementa il contatore dello store [Vuex];
• La pagina [page1] rimane invariata;
• vogliamo che il server restituisca la pagina richiesta con uno store [Vuex] il cui valore del contatore sia l'ultimo valore che aveva sul lato client quando una pagina viene richiesta manualmente dal server;

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

Cambia solo la pagina [index]:

<!-- page [index] -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message-->
    <template slot="right">
      <b-alert show variant="warning"> Home - value= {{ value }} </b-alert>
      <!-- bouton -->
      <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',
  // components used
  components: {
    Layout,
    Navigation
  },
  data() {
    return {
      value: 0
    }
  },
  // life cycle
  beforeCreate() {
    // client and server
    console.log('[home beforeCreate]')
  },
  created() {
    // client and server
    this.value = this.$store.state.counter
    console.log('[home created], value=', this.value)
  },
  beforeMount() {
    // customer only
    console.log('[home beforeMount]')
  },
  mounted() {
    // customer only
    console.log('[home mounted]')
  },
  // event management
  methods: {
    incrementCounter() {
      console.log('incrementCounter')
      // counter increment of 1
      this.$store.commit('increment', 1)
      // change display value
      this.value = this.$store.state.counter
    }
  }
}
</script>

• riga 10: abbiamo aggiunto un pulsante per incrementare il contatore dello store [Vuex];
• riga 54: il metodo che gestisce il [clic] sul pulsante [Increment];
• riga 57: il contatore dello store viene incrementato di 1;
• riga 59: il valore del contatore viene assegnato alla proprietà [value] in modo che venga visualizzato alla riga 8;

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

// source code directory
  srcDir: 'nuxt-04',
  // router
  router: {
    // application URL root
    base: '/nuxt-04/'
  },
  // server
  server: {
    // service port, default 3000
    port: 81,
    // network addresses listened to, default localhost: 127.0.0.1
    // 0.0.0.0 = all the machine's network addresses
    host: 'localhost'
}

Una volta eseguito, la prima pagina visualizzata è la seguente:

Cliccando più volte sul pulsante [3], appare la seguente nuova pagina:

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

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

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

• In [2], abbiamo perso il valore attuale del contatore. Siamo tornati al suo valore iniziale;

Questo risultato ha perfettamente senso se si osservano i log:

• In [1], il server ha rieseguito la funzione [nuxtServerInit]. Tuttavia, questa funzione è la seguente:

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

export const mutations = {
   // increment counter by one [inc] value
  increment(state, inc) {
    state.counter += inc
  }
}

export const actions = {
  async nuxtServerInit(store, context) {
      // who executes this code?
    console.log('nuxtServerInit, client=', process.client, 'serveur=', process.server)
     // waiting for a promise to be fulfilled
    await new Promise(function(resolve, reject) {
       // this is normally an asynchronous function
       // we simulate it with a one-second wait
      setTimeout(() => {
          // success
        resolve()
      }, 1000)
    })
     // modify the blind
    store.commit('increment', 53)
      // log
    console.log('nuxtServerInit commit terminé')
  }
}

La riga 28 imposta il contatore su 53.

Esaminiamo la richiesta HTTP effettuata dal browser quando abbiamo aggiornato la pagina [page1]:

Possiamo notare che, oltre alla pagina [page1] [1], il client richiede una serie di script dal server. Si notino gli script [pages_index, pages_page1], che sono gli script associati alle pagine [index, page]. Questi script vengono forniti con 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

Possiamo vedere che questa richiesta non invia alcuna informazione al server. Il server non ha quindi modo di conoscere lo stato dello store [Vuex] sul lato client. Affinché ciò avvenga, il client avrebbe dovuto inviare queste informazioni al server.

Nel progetto seguente [nuxt-05], utilizziamo un cookie in modo che il client possa inviare informazioni al server quando richiesto.