axios 获取一个浏览器cookie,并将其传递给nuxtjs上的服务器端呈现

3gtaxfhh  于 2022-11-05  发布在  iOS
关注(0)|答案(3)|浏览(296)

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

  • 我从后端的restful api获得异步 AJAX 请求的结果。
  • 我需要将结果作为头文件添加到axios的 AJAX 库的每个任务中。
  • 所以我把结果保存在浏览器cookie上。
  • 当我需要结果时,我从cookie中获取它,并将它附加到axios请求上。

现在,问题是在服务器端呈现,我无法得到浏览器cookie。
我该怎么处理这个问题?

jq6vz3qz

jq6vz3qz1#

您可以在本地存储器和cookie中存储所需的信息,例如:

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

阅读它(Cookie自动包含在请求中)

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');
}
xienkqul

xienkqul2#

首先,您可以从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;']);
lrpiutwd

lrpiutwd3#

在Nuxt 3和Nuxt 2 Bridge中,您可以使用useCookie
Nuxt提供了一个SSR友好的可组合的读写cookie。

const session = useCookie('session')
session.value = ''

相关问题