7. Voorbeeld [nuxt-04]: het behouden van een client/server-sessie

Het project [nuxt-04] behandelt het probleem van het behoud van een client/server-sessie. We gaan verder met het project [nuxt-03] met de volgende wijzigingen:

• de pagina [index] krijgt een knop waarmee de teller van de store [Vuex] kan worden verhoogd;
• de pagina [page1] blijft ongewijzigd;
• we willen dat wanneer een pagina handmatig bij de server wordt opgevraagd, deze de gevraagde pagina terugstuurt met een store [Vuex] waarvan de tellerwaarde de laatste waarde is die deze aan de clientzijde had;

Het project [nuxt-04] wordt in eerste instantie aangemaakt door het project [nuxt-03] te kopiëren:

Alleen de pagina [index] verandert:

<!-- pagina [index] -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigatie -->
    <Navigation slot="left" />
    <!-- bericht-->
    <template slot="right">
      <b-alert show variant="warning"> Home - value= {{ value }} </b-alert>
      <!-- knop -->
      <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',
  // gebruikte componenten
  components: {
    Layout,
    Navigation
  },
  data() {
    return {
      value: 0
    }
  },
  // levenscyclus
  beforeCreate() {
    // client en server
    console.log('[home beforeCreate]')
  },
  created() {
    // client en server
    this.value = this.$store.state.counter
    console.log('[home created], value=', this.value)
  },
  beforeMount() {
    // alleen client
    console.log('[home beforeMount]')
  },
  mounted() {
    // alleen client
    console.log('[home mounted]')
  },
  // gebeurtenisbeheer
  methods: {
    incrementCounter() {
      console.log('incrementCounter')
      // teller met 1 verhogen
      this.$store.commit('increment', 1)
      // wijziging van de weergegeven waarde
      this.value = this.$store.state.counter
    }
  }
}
</script>

• regel 10: er is een knop toegevoegd om de teller van de store [Vuex] te verhogen;
• regel 54: de methode die de [clic] op de knop [Incrémenter] beheert;
• regel 57: de teller van de rolluik wordt met 1 verhoogd;
• regel 59: de waarde van de teller wordt toegewezen aan de eigenschap [value], zodat deze wordt weergegeven door regel 8;

Het project [nuxt-04] wordt uitgevoerd met het volgende bestand [nuxt.config.js]:

// broncodemap
  srcDir: 'nuxt-04',
  // router
  router: {
    // hoofdmap van de URL van de applicatie
    base: '/nuxt-04/'
  },
  // server
  server: {
    // servicepoort, standaard 3000
    port: 81,
    // netwerkadressen waarop wordt geluisterd, standaard localhost: 127.0.0.1
    // 0.0.0.0 = alle netwerkadressen van de machine
    host: 'localhost'
}

Bij het uitvoeren wordt de volgende eerste pagina weergegeven:

Door meerdere keren op de knop [3] te klikken, verschijnt de volgende nieuwe pagina:

Als je de link [3] gebruikt, krijg je de volgende pagina:

• bij [2] geeft de pagina [page1] [1] de waarde van de teller correct weer;

Laten we nu de pagina vernieuwen met [3]. De nieuwe pagina ziet er als volgt uit:

• bij [2] is de huidige waarde van de teller verdwenen. We zijn terug bij de beginwaarde;

Dit resultaat is volkomen begrijpelijk als we naar de logs kijken:

• in [1] heeft de server de functie [nuxtServerInit] opnieuw uitgevoerd. Deze functie is echter als volgt:

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

export const mutations = {
   // de teller met één verhogen [inc]
  increment(state, inc) {
    state.counter += inc
  }
}

export const actions = {
  async nuxtServerInit(store, context) {
     // wie voert deze code uit?
    console.log('nuxtServerInit, client=', process.client, 'serveur=', process.server)
     // we wachten op het einde van een belofte
    await new Promise(function(resolve, reject) {
       // normaal gesproken hebben we hier een asynchrone functie
       // we simuleren deze met een wachttijd van één seconde
      setTimeout(() => {
         // geslaagd
        resolve()
      }, 1000)
    })
     // we wijzigen de store
    store.commit('increment', 53)
     // log
    console.log('nuxtServerInit commit terminé')
  }
}

Op regel 28 wordt de waarde 53 aan de teller toegewezen.

Laten we eens kijken naar het verzoek HTTP dat door de browser is gedaan toen we de pagina [page1] hebben vernieuwd:

We zien dat de client, naast de pagina's [page1] en [1], een aantal scripts bij de server opvraagt. Let op de scripts [pages_index, pages_page1], die bij de pagina’s [index, page] horen. Deze scripts worden bij elk verzoek aan de server meegeleverd, ongeacht de opgevraagde pagina;

In [1] wordt de pagina [page1] bij de server opgevraagd met het volgende verzoek 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

We zien dat dit verzoek geen informatie naar de server verzendt. De server heeft dus geen manier om de status van de store [Vuex] aan de clientzijde te kennen. Hiervoor zou de client deze informatie naar de server moeten sturen.

In het volgende project [nuxt-05] gebruiken we een cookie zodat de client informatie naar de server kan sturen wanneer deze wordt aangeroepen.