# Cookies

Für die Speicherung von statischen Daten (bis zu 2 kB) im Browser werden in hubble Cookies verwendet, wie im Abschnitt Sessions beschrieben ist. Dazu wird das NuxtJS Modul cookie-universal-nuxt (opens new window) verwendet. Um jedoch die abgespeicherten Daten abrufen zu können, muss beachtet werden, dass NuxtJS bei initialen Requests und bei Reloads immer ein serverseitiges Rendering durchführt. Dies bedeutet, in dem Moment, in dem eine Befüllung des Vuex Store States mit Daten durchgeführt wird, existiert zu diesen Zeitpunkten keine Browserumgebung und somit keine Cookies, die ausgelesen werden können. Somit muss die Abfrage von Cookies in einem clientseitig ausgeführten Schritt erfolgen: Dazu eignet sich die Plugin Funktionalität von Nuxt.js (opens new window). Diese Funktionalität ist auch im @hubblecommerce in Verwendung: Die ~/modules/@hubblecommerce/hubble/core/plugins/sw/nuxt-client-init_no_ssr.js enthält Abfragen nicht nur an den Cookie-Speicher, sondern auch an den localStorage. Dafür werden die entsprechenden Vuex Store actions aufgerufen. Im Folgenden ist das in hubble verwendete Schema, am Beispiel des Bezahlvorgangs, zu sehen:

Der clientseitige Aufruf von actions erfolgt im Plugin:

// ~/modules/@hubblecommerce/hubble/core/plugins/[BACKEND]/nuxt-client-init_no_ssr.js
export default async (ctx) => {
   // ..
    await ctx.store.dispatch('modApiPayment/setOrderByCookie', ctx);
}
1
2
3
4
5

Die aufgerufene Methode befindet sich im entsprechenden Vuex Store Modul, in diesem Fall der modApiPayment:

// ~/modules/@hubblecommerce/hubble/core/store/api/modApiPayment.js  - this method is the same as for /sw
// ~/modules/@hubblecommerce/hubble/core/store/sw/modApiPayment.js - this method is the same as for /api
async setOrderByCookie({ commit, state }) {
    return new Promise((resolve) => {
        // try to retrieve auth user by cookie
        let _cookie = this.$cookies.get(state.cookieNameOrder);

        // no cookie? ok!
        if(! _cookie) {
            resolve({
                success: true,
                message: 'order not known by cookie.'
            });
        } else {
            // Save cookie to store
            commit('setOrder', _cookie);

            resolve({
                success: true,
                message: 'order taken from cookie.',
                redirect: true
            });
        }
    })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Eine Abspeicherung im Cookie erfolgt dabei, unter anderem, über die Angabe des Namen, des abzuspeichernden Wertes und der Gültigkeitsdauer des Cookies:

// ~/modules/@hubblecommerce/hubble/core/store/api/modApiPayment.js 
async storeChosenPaymentMethod({ commit, state, getters }, payload) {
    return new Promise((resolve) => {
        // ...

        // Save order from store to cookie
        this.$cookies.set(state.cookieNameOrder, state.order, {
            path: state.cookiePath,
            expires: getters.getCookieExpires
        });

        resolve();
    })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Ein wichtiger Aspekt bei der Verwendung von Cookies ist deren Lifetime im Browser. Diese errechnet sich unter anderem aus dem in dem Vuex Store Modul modCookieNotice gesetzten Wert für das Feld cookieTTL. Die, in der oben abgebildeten action storeChosenPaymentMethod, verwendete Berechnung ist im Folgenden zu sehen:

getters:  {
    getCookieExpires: (state) => {
        return new Date(new Date().getTime() + state.cookieTTL * 60 * 1000);
    },
    // ...
}
1
2
3
4
5
6