在 Nuxt 3 API 和中间件中使用 cookie

Question

Nuxt 3 有没有办法在服务器端使用 cookie？ 比如我想在API中设置cookie，然后在中间件中读取它的数据：

// ~/server/api/testApi.ts

export default defineEventHandler(event => {
    /* setCookie('myCookie', 'myValue'); */
});

// ~/middleware/testMw.ts

export default defineNuxtRouteMiddleware((to, from) => {
    /* getCookie('myCookie'); */ // ~~> myValue
});

我尝试在 API 中使用

useCookie

设置 cookie，但在中间件中却是

undefined

。 我也不明白如何在中间件中使用

getCookie

，因为它需要中间件中不存在的

event

对象。

背景

我想创建一个非常简单的身份验证系统。在

/api/auth.post.ts

中，我创建了某种保存在 cookie 中的令牌。然后，为了检查访问者是否已登录，我需要以某种方式从

/middleware/logged.ts

中的 cookie 检索此令牌。

我愿意接受其他建议。

Answer 1

在中间件中使用它们之前，您必须通过

pinia

定义一个插件来获取 cookie 的初始值。

---

例如cookie中有一个值：

theme

// store/theme.ts

import { defineStore } from 'pinia';
import Cookies from 'js-cookie'; // you can use any Cookie packages you want

export const useThemeStore = defineStore('theme', {
    state: () => ({
        _theme: {}
    }),
    getters: {
        theme: (state) => stats._theme
    },
    actions: {
        setTheme (value: 'light' | 'dark' | 'system') {
            // update the value in both cookie and memory
            this._theme = value;
            Cookies.set('theme', value);
        }
    }
});

定义一个插件来启动商店

// plugin/initial.ts
import Cookie from 'js-cookie';
import { useThemeStore } from '~/stores/theme';

function cookieFromRequestHeaders (key: string) {
    const headers = useRequestHeaders(['cookie']);
    if ('cookie' in headers) {
        const cookie = headers.cookie?.split(';').find(
            c => c.trim().startsWith(`${key}=`)
        );
        if (cookie) {
            return cookie.split('=')[1];
        }
    }
    return '';
}

export default defineNuxtPlugin(async (nuxtApp) => {

    const theme = cookieFromRequestHeaders('theme') || Cookie.get('theme');

    const themeStore = useCookieStore(nuxtApp.$pinia as Pinia);

    themeStore.setAllow(theme);
});

---

现在，您可以在中间件中使用它了

import { useThemeStore } from '~/stores/theme';

export default defineNuxtRouteMiddleware((to) => {

    const themeStore = useThemeStore();

    if (themeStore.theme === 'dark') {
        return navigateTo('/dark-index');
    }
});