Laravel sainttum csrf cookie 每个请求？

Question

我正在使用 Laravel sainttum （以前的 Airlock）并且有一个问题。我在文档中读到：

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

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

CSRF 保护初始化后，您应该向典型的 Laravel /login 路由发出 POST 请求。此 /login 路由可能由 laravel/ui 身份验证脚手架包提供。

这是否意味着对于我发出的每个请求，我应该首先检查 cookie 是否已经设置？因为假设我有一个注册的用户。在发出 POST 请求来注册用户之前，我应该首先发出 GET 请求以从后端获取 CSRF-Cookie，然后发出 POST 请求来注册用户。

现在，用户被重定向到登录网页并被要求登录。那么前端是否首先必须检查是否有 CSRF-Cookie，如果没有，是否应该首先再次发出 GET 请求来获取 cookie？

最后一点也让我感到困惑，因为在调用注册方法时，用户实际上并未登录，因此用户必须重定向到登录页面，以使用用户刚刚填写的注册凭据进行登录，这对我来说似乎是这样就像糟糕的用户体验一样，对吧？

Answer 1

我知道自提出这个问题以来已经有一段时间了，但对于那些在那里搜索的人来说，不。您不必/sanctum/csrf-cookie为每个请求都打电话。在发出请求之前post | put | delete...，您可以检查XSRF-TOKENcookie 是否已设置。如果不是，请调用该/sanctum/csrf-cookie路由（或您配置的任何内容）。请求完成后（XSRF-TOKEN您的浏览器将自动设置 cookie），您现在可以继续初始请求。

执行此操作的最佳位置是在拦截器中（如果您的 http 库支持它）。我假设你正在使用 axios。

// Install with 'npm i js-cookie'. A library that helps you manage cookies 
// (or just build your own).
import Cookies from 'js-cookie';

// Create axios instance with base url and credentials support
export const axiosInstance = axios.create({
    baseURL: '/api',
    withCredentials: true,
});

// Request interceptor. Runs before your request reaches the server
const onRequest = (config) => {
    // If http method is `post | put | delete` and XSRF-TOKEN cookie is 
    // not present, call '/sanctum/csrf-cookie' to set CSRF token, then 
    // proceed with the initial response
    if ((
            config.method == 'post' || 
            config.method == 'put' || 
            config.method == 'delete',
            /* other methods you want to add here */
        ) &&
        !Cookies.get('XSRF-TOKEN')) {
        return setCSRFToken()
            .then(response => config);
    }
    return config;
}

// A function that calls '/api/csrf-cookie' to set the CSRF cookies. The 
// default is 'sanctum/csrf-cookie' but you can configure it to be anything.
const setCSRFToken = () => {
    return axiosInstance.get('/csrf-cookie'); // resolves to '/api/csrf-cookie'.
}

// attach your interceptor
axiosInstance.interceptors.request.use(onRequest, null);

export default axiosInstance;

XSRF-TOKEN cookie 具有到期时间。此后，浏览器会将其删除。因此，只要您能找到 cookie，就可以安全地发出请求，而无需调用/sanctum/csrf-cookie或执行任何您配置的操作。