获取浏览器cookie，并将其传递给nuxt js上的服务器端渲染答案

【问题标题】：Get a browser cookie, and pass it to the server side rendering on nuxt js获取浏览器cookie，并将其传递给nuxt js上的服务器端渲染
【发布时间】：2018-09-23 07:01:05
【问题描述】：

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

我通过异步 ajax 从后端的 restful api 获得结果要求。
我需要将结果作为标题添加到每个任务中 axios 的 ajax 库。
所以我将结果保存在浏览器 cookie 中。
当我需要结果时，我从 cookie 中获取，并附加到 axios 请求。

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

我要怎么解决这个问题？

【问题讨论】：

可能是因为您的页面没有刷新。

标签： vue.js axios nuxt.js

【解决方案1】：

首先，您可以从nuxt context 获取req（请求）和res（响应）。

您可以通过

设置cookie

// client side
document.cookie = 'sessionId=some-id;';
document.cookie = 'userId=awesome-id;';

// or server side
res.setHeader('Set-Cookie', ['sessionId=some-id;', 'userId=awesome-id;']);

【讨论】：

【解决方案2】：

您可以将所需的信息存储在本地存储和 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');
}

【讨论】：

这是插件文件吗？或者放在哪里？
vuex store 里面有这些