vue.js - 获取浏览器cookie，传递给nuxt js上的服务端渲染

Question

我用nuxt js开发了一个项目。我在下面遇到这样的问题。

我从带有异步ajax的后端的restful api得到结果
要求。

我需要将结果作为标题添加到每个任务中
axios 的 ajax 库。

所以我将结果保存在浏览器 cookie 上。

当我需要结果时，我从 cookie 中获取它，并将其附加到 axios
要求。

现在，问题出在服务器端渲染上，我无法获取浏览器 cookie。

遇到问题我该怎么办？

Answer 1

您可以将所需的信息存储在本地存储和 cookie 中，例如

import Cookie from 'js-cookie'
....
setCookie(state, value) {
  if (process.client) {
    localStorage.setItem('cookie', value);
  }
  Cookie.set('cookie', value)
}

读取它(cookies 自动包含在请求中)

getCookie(context, req) {
  // if server
  if (req) {
    if (req.headers.cookie) {
      const cookie = req.headers.cookie.split(';').find(...)
    }
  }
  // if client
  if (process.client) {
    const cookie = localStorage.getItem('cookie');
  }
}

并删除

removeCookie(state) {
  if (process.client) {
    localStorage.removeItem('cookie');
  }
  Cookie.remove('cookie');
}