javascript - 如何从 axios 拦截器访问通过 Sveltkit cookie 创建的 cookie

Question

我有一个包含以下操作的登录表单 (login/+page.server.js):

export const actions = {

    default: async ({ request, cookies }) => {

        const data = Object.fromEntries(await request.formData());
        
        // validate and create DTO.
        const loginData = loginDTO(data);

        // if errors returned from building the DTO (validation errors) then return the object.
        if (loginData?.errors && !emptyObject(loginData.errors)) {
            return {
                "data": loginData.data,
                "errors": loginData.errors,
            };
        }


        // perform call to log in a user.
        const response = await login(loginData);
        // const response = await loginUser(loginData);
        if (response.success) {
            // save token to a cookie
            cookies.set(
                'token',
                response.res.data.data,
                {
                    path: '/',
                    maxAge: 60 * 60 * 25 * 365,
                    httpOnly: false,
                    secure: false,
                }
            )

            throw redirect(302, '/')
        }

        return {
            "data": loginData.data,
            "errors": response.errors,
        }
    }
}

基本上，这是向后端发出请求，对用户进行身份验证，并返回 JWT token 。到目前为止一切顺利， token 已返回，并且使用 Sveltekit 的 cookies 我可以成功设置 cookie，当我检查 Chrome 的应用程序选项卡(在开发工具中)时，我可以在那里看到 cookie。

现在，我需要将 cookie 的值附加到我的请求中。我正在使用 axios。为此，我创建了一个拦截器:

import axios from "axios";
import Cookies from "js-cookie";

// let Cookies2 = Cookies.noConflict();
export const app = axios.create({
    baseURL: "http://127.0.0.1:8080/api/v1",
    timeout: 1000,
    params: {},
    // withCredentials: true,
})
// Request interceptor. Whenever a new request goes out it will be caught
// by the interceptor and whatever code is defined will be executed before continuing its flow.
app.interceptors.request.use(
    config => {
        
        console.log("here in http middleware...")
        let token = Cookies.get()
        console.log("token: ", token);
        config.headers['Content-Type'] = 'application/json';
        return config;
    },
    error => {
        Promise.reject(error)
    }
);

但我有几个问题:

1. 我无法使用 Sveltekit 的 cookies 对象，不知道如何在此处导入它。
2. 由于 cookie 在客户端可见，因此我决定安装 js-cookie 来访问它，但拦截器中的 log 语句始终是返回空，这意味着它没有拾取 cookie。

知道发生了什么吗？或者任何其他方式可以实现我想要做的事情？

我也可以放弃整个 cookie 方法，只使用 store，每种方法的优缺点是什么？

谢谢。

Answer 1

如果您只需拥有 baseURL 并附加 JWT，我建议您坚持使用 native fetch由 SvelteKit 提供，因为它提供了比普通工具更多的功能 fetch API .

要在 Svelte 中创建等效的“拦截器”，您可以使用 Hook ，更具体地说，handleFetch钩子(Hook)。

其工作原理如下:

• 应用的前端已将 jwt 存储在浏览器 session 中(就像您所做的那样)。
• 每当 svelte 前端进行提取时，它都会从 SvelteKit 的后端提取。
• SvelteKit 后端获取目标位置。
• 从SvelteKit后端获取数据会触发handleFetch钩子(Hook)。
• 我们可以修改handleFetch钩子(Hook)内的提取。
• 由于我们使用 SvelteKit fetch，cookie 等信息将被传递到后端的钩子(Hook)，这就是您访问 cookie 的方式。

以下是 TypeScript 中的示例代码:

// src/hooks.server.ts
import type { HandleFetch } from '@sveltejs/kit';

export const handleFetch = (async ({ request, fetch, event: { cookies } }) => {
    if (request.url.startsWith(API_URL)) {
        request.headers.set('Authorization', `Bearer ${cookies.get('token')}`);
    }
    return fetch(request);
}) satisfies HandleFetch;

如果您想要拥有基本URL之类的东西，您可以通过创建新请求来修改request.url。

import type { HandleFetch } from '@sveltejs/kit';

export const handleFetch = (async ({ request, fetch }) => {
    const newRequest = new Request('myBaseUrl' + request.url, request);
    return fetch(newRequest);
}) satisfies HandleFetch;