如何在Nuxt SSR的middleware中操作cookies，实现双端读写及重定向生效？

你当前的写法无法同时满足服务端、客户端双端的cookie读写需求，核心原因是js-cookie是纯客户端运行的库，依赖浏览器的document对象，在SSR服务端运行阶段会直接报错，完全无法正常执行。 #

现有代码的已知问题 #

• 拼写错误：Cookies.set('cookieTokne', nanoId())中键名拼写错误，应为cookieToken，会导致后续读取不到对应值
• 环境兼容问题：js-cookie不支持服务端运行，SSR模式下middleware会在首次访问/页面刷新时在服务端执行，此时调用Cookies.get/set会直接抛出未定义错误
• 服务端设置cookie逻辑缺失：即使是客户端运行阶段设置的cookie，服务端也无法直接读取，必须由客户端发起新请求时在请求头携带才能被服务端获取

正确实现方案 #

你可以直接使用Nuxt生态兼容双端的cookie操作库cookie-universal-nuxt，已经封装好了两端的读写逻辑，不需要自己做环境判断，用法如下：

第一步：安装依赖 #

npm i cookie-universal-nuxt

在nuxt.config.js中注册模块：

modules: [
  'cookie-universal-nuxt',
],

第二步：修改Middleware代码 #

async middleware(context) {
  const { $cookies, route, redirect, $api } = context
  const token = route.query.token
  
  if (!token) {
    // 双端通用的cookie读取方法，服务端会自动从req.headers.cookie读，客户端从document.cookie读
    const cookieToken = $cookies.get('cookieToken')
    
    if (!cookieToken) {
      const newToken = nanoId()
      // 双端通用的cookie写入方法，服务端会自动设置res的Set-Cookie头，客户端直接写document.cookie
      $cookies.set('cookieToken', newToken, {
        path: '/', // 必须配置path为根路径，确保全站可访问
        // 按需配置domain、maxAge、secure等属性
      })
    }

    const result = await $api.campaignNewShare.createNewShare()
    // 重定向会触发新请求，已经设置的cookie会自动携带到请求头，服务端可以直接读取
    redirect({ name: 'campaigns-new', query: { token: result.data.token } })
  }
},

问题答复 #

• 按上述方法修改后，服务端可以正常读取cookie：重定向触发的新请求会自动携带已设置的cookie到请求头，服务端通过$cookies.get可以直接获取
• 重定向后浏览器端可以正常读取cookie：不管是服务端通过Set-Cookie头设置的，还是客户端直接写入的cookie，都可以在客户端正常读取
• 所有cookie读写操作都可以在该middleware内完成，不需要额外写其他逻辑

内容的提问来源于stack exchange，提问作者Čamo