Laravel sanctum csrf cookie 每个请求？答案

【问题标题】：Laravel sanctum csrf cookie every request?Laravel sanctum csrf cookie 每个请求？
【发布时间】：2020-07-02 08:41:11
【问题描述】：

我正在使用 Laravel sanctum（以前的 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？

这最后一点也让我感到困惑，因为当调用 register 方法时，用户实际上并没有登录，所以用户必须被重定向到登录页面才能使用用户刚刚填写的凭据登录以注册哪个对我来说，这似乎是一种糟糕的用户体验，对吧？

【问题讨论】：

标签： php laravel cookies axios laravel-airlock

【解决方案1】：

当你得到 csrf 令牌后，在下面的请求中，laravel 会自动更新令牌，所以你不需要在 axios.get('/sanctum/csrf-cookie') 之后关注这个。

【讨论】：

所以基本上我应该在注册时提出一个请求，然后 Laravel 会自己处理每个请求？
检查一下，bilibili.com/video/av96088617。里面有一个样本。

【解决方案2】：

一旦您点击了axios.get('/sanctum/csrf-cookie') API，之后您就不必为每个请求一次又一次地点击它，因为 this/sanctum/csrf-cookie 会将 XSRF 令牌保存在浏览器上，而 Axios 会将其与请求一起发送。

您可以在此视频中详细了解它：https://www.youtube.com/watch?v=8Uwn5M6WTe0

【讨论】：

【解决方案3】：

我知道这个问题被问到已经有一段时间了，但对于任何在那里搜索的人来说，不。您不必在每次请求时都致电/sanctum/csrf-cookie。在发出post | put | delete... 请求之前，您可以检查是否设置了XSRF-TOKEN cookie。如果不是，请调用/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 或您配置的任何内容。

【讨论】：