主页 / user-30137373

Marko Ticinovic's questions

Martin Hope
Marko Ticinovic
Asked: 2025-04-02 11:50:24 +0800 CST
  • 5

问题

我正在构建一个应用程序，该应用程序具有 Next.js 前端和 Laravel 后端，并使用 Sanctum 进行 SPA 身份验证。当我从 Next.js 应用程序登录时，我可以看到浏览器中设置的身份验证 cookie，但后续获取用户信息的请求返回“未经身份验证”错误。注意：Postman 中的一切都正常运行。

环境

  • 前端：Next.js
  • 后端：带有 Sanctum 的 Laravel
  • 身份验证：Laravel Sanctum SPA 身份验证
  • 在 Postman 中测试时一切正常

我尝试过的方法

登录过程运行正常，我可以确认登录后浏览器中设置了 cookie。但是，当我尝试获取经过身份验证的用户信息时，出现“未授权”错误。我在 Postman 中尝试对“/api/v1/user”发出 GET 请求，成功了。

代码

我的登录功能：

const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;

async function fetchCsrfCookie() {
    await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/sanctum/csrf-cookie`, {
        method: 'GET',
        credentials: 'include',
    });
}

export const fetchSignIn = async (username: string, password: string) => {
    //   1) Init Sanctum
    await fetchCsrfCookie();

    // 2) Login
    const res = await fetch(`${baseUrl}/api/v1/login`, {
        method: 'POST',
        credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password, remember: true }),
    });
    if (!res.ok) {
        throw new Error('Login failed');
    }
    return res.json();
};

获取用户功能：

export const fetchAuthUser = async () => {
    try {
        const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/v1/user`, {
            method: 'GET',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json',
            },
        });

        if (!res.ok) {
            const errorData: any = await res.json();
            console.error('Error data:', errorData);
            throw new Error(errorData.message || res.statusText);
        }

        return res.json();
    } catch (error) {
        console.error(`Failed to fetch resource:`, error);
        throw error;
    }
};
laravel