Laravel Sanctum 在尝试获取经过身份验证的用户时返回 401

Question

我想在我的 React SPA 启动时获取当前登录的用户，这样我就可以显示用户的信息，但是每次我尝试从我的 Laravel 后端获取它时，我都会得到 401。

我正在为我的 API 使用 Laravel + Sanctum，并在前端的不同项目中使用 React。

后端：

我的AuthController controller 中有以下内容：

public function user()
    {
        return auth()->user();
    }

在我的路线api.php我有以下路线：

    Route::group(['middleware' => ['auth:sanctum']], function () {
        Route::get('/user', [AuthController::class, 'user']);
        Route::post('/logout', [AuthController::class, 'logout']);
    });

我的.env文件包含以下内容：

SANCTUM_STATEFUL_DOMAINS=localhost:3000
SESSION_DOMAIN=localhost

前端：

我有一个包含以下内容的上下文：

 useEffect(() => {
    apiClient()
      .get("/api/user")
      .then((res) => {
        setUser(res.data.user);
      });
  }, []);

如果您想知道，我的apiClient()来自这里：

import axios from "axios";

const apiClient = () => {
  const api = axios.create({
    baseURL: "http://localhost:8000",
    withCredentials: true,
    headers: {
      Accept: "application/json",
    },
  });

  return api;
};

export default apiClient;

此上下文位于应用程序的顶层。

我不确定发生了什么，我的路由/登录按预期工作，我发送请求并接收用户信息作为我设置为 React state 的响应。 在页面刷新此 state 被删除，因为这就是 Javascript 的工作原理。 我想使用上面提到的useEffect再次设置它，所以当用户在关闭浏览器后加载 web 应用程序时，他们仍然可以看到他们的信息。

提前致谢！

Answer 1

要验证您的 SPA，您的 SPA 的“登录”页面应首先向 /sanctum/csrf-cookie 端点发出请求，以初始化应用程序的 CSRF 保护：

axios.get('/sanctum/csrf-cookie').then(response => {
    //Login...
});

有关更多信息，请查看https://laravel.com/docs/8.x/sanctum#spa-authentication