时间戳

首页 > 解决方案 > 如何使用带有 cookie 的 Nuxt SSR 中间件？

cookies - 如何使用带有 cookie 的 Nuxt SSR 中间件？

问题描述

我有一个 SSR Nuxt 应用程序。页面代码中有一个中间件。我不知道我是否可以在该中间件中使用 js-cookies 库，以及它是否能按预期工作。我需要在浏览器中获取和设置 cookie，并在服务器上获取 cookie 值。所有这些步骤都在中间件中。

我是说

  1. 检查是否通过 Cookies.get(key) 设置了 cookie
  2. 如果没有，则通过 Cookies.set(key, value) 设置 cookie
  3. 重定向到我想要获取此 cookie 值的服务器

代码应该看起来像

async middleware(context) {
    const token = context.route.query.token;
    if (!token) {
        const cookieToken = Cookies.get('cookieToken');

        if( !cookieToken ) {
            Cookies.set('cookieTokne', nanoId());
        }

        const result = await context.$api.campaignNewShare.createNewShare();
        context.redirect({'name': 'campaigns-new', 'query': {token: result.data.token}});
    }
},

我可以在服务器上设置后获取 cookie，并且可以在重定向后在浏览器中获取它吗？我需要确保同时设置和获取这个中间件。

标签： cookiesnuxt.jsmiddlewareserver-side-rendering

解决方案

使用nuxt 通用 cookie并在您的模块上注册，这样您就可以在 nuxt 应用程序的任何地方访问该模块。

以您的代码为例：

async middleware(context) {
    const token = context.route.query.token;

    if (!token) {
        const cookieToken = context.$cookies.get('cookieToken');

        if( !cookieToken ) {
            context.$cookies.set('cookieToken', nanoId());
        }

        const result = await context.$api.campaignNewShare.createNewShare();
        context.redirect({'name': 'campaigns-new', 'query': {token: result.data.token}});
    }
},

推荐阅读