Nuxt身份验证SSR cookie仅在关闭浏览器并加载页面时出现问题

Question

我使用nuxt和nuxt-auth-next，并使用laravel api后端。

当我完全关闭浏览器并加载页面时，nuxt无法读取server-side上的cookie，并且无法理解我已登录，而在client-side上，它会理解我有cookie，因此我的server-side和client-side将根据登录的用户加载某些组件时会有所不同，然后，很明显，这将会发生：

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

现在，当我刷新此页面时。问题会消失的，一切都会好起来的。

我还检查了第一次加载时server-side上是否有cookies：

 if (process.client) {
        console.log('cookie = ', this.$cookies.get('auth._token.laravelJWT'));
 } else {
        console.log('cookie = ', this.$cookies.get('auth._token.laravelJWT'));
 }

控制台上的结果将是：

Nuxt SSR
cookie = undefined

Client: 
cookie = Bearer blablabla

Answer 1

您的cookie很可能被设置为仅用于会话的( nuxt auth模块的默认设置)，这解释了为什么您在关闭浏览器后会遇到问题。为了解决这个问题，给他们一个过期的日期，这样服务器就会知道这是一个经过身份验证的用户。

要在8天后过期，您的nuxt.config.js应如下所示：

export default {
  ssr: true,
  ...
  auth: {
    cookie: {
      options: {
        expires: 8
      }
    },
    ...
  },
}

Answer 2

不久前我遇到了这个问题。当你的项目在服务器端运行时，你可以使用这个包"cookieparser“来访问你的cookie。

这是我在服务器端获取用户令牌的方式：

const cookieparser = process.server ? require('cookieparser') : undefined  


async nuxtServerInit ({ commit }, { req }) {

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

     // if we have a token , get user data with api
     if (parsed.access_token) {
       
     }
  }
}

Answer 3

来自https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies：

当前会话结束时，将删除

会话cookies。浏览器定义“当前会话”何时结束，并且一些浏览器在重启时使用会话还原，这可能导致会话cookie无限期地持续很长时间。永久cookies将在Expires属性指定的日期删除，或在Max-Age属性指定的一段时间后删除。

如果您使用nuxt-auth，并且希望避免会话cookie过期从而导致关闭浏览器的问题，则可以在nuxt.config.js中设置expires和maxAge属性：

auth: {
  ...
  cookie: {
    options: {
      expires: new Date(new Date().getTime()+20000000000).getTime(), //thats today + a year
      maxAge: 31622400
    }
  }
},

这段代码来自nuxtServerInit does not receive auth cookies