Nuxt et js-cookie impossible de récupérer un cookie

Bonsoir !

Toujours dans mon apprentissage de NodeJS et de VueJS, je suis en train de créer un petit projet d’exemple avec Nuxt et Strapi.

Pour cela, je suis en train de suivre un tuto présent sur le site de Strapi. Cependant, il y à quelque chose que je ne comprend pas.

Côté client (avec Nuxt donc), j’ai un objet user que je sauvegarde comme ceci :

import Cookies from 'js-cookie'

// ...

Cookies.set('user', user)

Maintenant, lorsque je fait :

import Cookies from 'js-cookie'

// ...

console.log('User ' + Cookies.get('user'))

Je me retrouve avec un undefined.

La solution est la suivante :

import cookieparser from 'cookieparser'

// ...

const parsed = cookieparser.parse(req.headers.cookie)
console.log(parsed.user)

Pourquoi ais-je besoin de cookieparser ? Pourquoi je peux faire un "Cookies.set()" mais pas un "Cookies.get()" ? J’ai du mal à comprendre…

Je crois avoir compris qu’il y à une histoire de client et serveur… mais j’en sais pas plus.

cookie-parser va interpréter l’header Cookie d’une header pour en faire un object comme cet exemple.

Es-tu sûr d’avoir besoin de js-cookie ? La doc parle de res.cookie pour Express.

Je n’utilise pas Express, mais Nuxt pour le frontend. Pour la backend, c’est Strapi.

A moins que Nuxt utilise aussi Express ?

Edit : Mais dans tout les cas, je n’ai pas accès à des variables "res". Uniquement "req".

Sinon, j’ai un autre souçi qui m’enbête pas mal avec Nuxt, et mes recherches ne donnent aucun résultat :

import axios from 'axios'

const apiUrl = process.env.apiUrl

export default {
  computed: {
    post() {
      console.log('Get Post')
      return this.$store.state.posts.list[0]
    }
  },
  async fetch({ store, params }) {
    store.commit('posts/empty')
    return await axios.get(`${process.env.apiUrl}/posts/${params.id}`)
      .then((res) => {
        res.data.cover.url = `${apiUrl}${res.data.cover.url}`
        store.commit('posts/add', res.data)
      })
  }
}

Lorsque je clique sur un lien <nuxt-link :to="{ name: 'index' }">< Retour</nuxt-link> sur ma page, je vois affiché deux fois 'Get Post’. Comme si la page été rechargée deux fois avant de revenir sur le lien, ce qui me provoque une erreur "post.title" not defined. Je ne sais pas comment faire…

Ah… J’ai cru que tu utilisais Espress encore. Je pensais que Nuxt était en Server Side Rendering, c’est peut-être pour ça que tu as en double, tu dois compiler deux fois la vue.

De plus il nous faudrait un code complet ou des mini-exemples complets pour t’aider. Tu as Repl.it aussi.

import Cookies from 'js-cookie'

// ...

Cookies.set('user', user)

const parsed = cookieparser.parse(req.headers.cookie)

C’est deux codes ne fonctionnent seulement s’il est dans une callback appelée lors de la réception d’une requête.

Pour les codes d’exemple :

store/auth.js

import Cookies from 'js-cookie'

export const state = () => {}

export const mutations = {
  setUser(state, user) {
    state.user = user
    Cookies.set('user', user)
  }
}

store/index.js

import cookieparser from 'cookieparser'

export const actions = {
  nuxtServerInit({ commit }, { req }) {
    let user = null
    if (req && req.headers && req.headers.cookie) {
      const parsed = cookieparser.parse(req.headers.cookie)
      user = (parsed.user && JSON.parse(parsed.user)) || null
    }

    commit('auth/setUser', user)
  }
}

Le code entier peut être trouvé sur le tutoriel de Strapi.

J’ai bien l’impression que c’est une histoire de client/serveur, mais je n’arrive toujours pas à comprendre, je ne trouve aucune infos là-dessus sur internet.

Le module js-cookie est un module qui est simplement chargé de créer des cookies en définissant SET-COOKIE. Alors que cookie-parser ca interpréter l’entête cookies d’une requête http. Il nécessite donc d’être utilisé ensemble pour fonctionner.