VueJS + Laravel Passport CSRF Token 已过期如何刷新

Question

我有一个页面离开它 2 小时。如果我只使用 Laravel，当我提交表单时。会有 CSRF Token expired 错误。

现在我有一个使用 VueJS 的表单。当我提交表格时。在控制台日志中显示{message: "Unauthenticated."}

但它实际上不是未经身份验证的，因为我刷新页面后，它并没有重定向到登录页面。在我登录期间，我已经勾选了“记住我”，因此用户已通过身份验证。我打开一个具有相同 URL 的新页面。它能够访问。当我检查差异是 X-CSRF-TOKEN。

以下是我从 Chrome 开发工具中复制的 curl。

//Token Expired
curl 'https://project-a.test/api/add-stock' -H 'origin: https://project-a.test' -H 'x-xsrf-token: eyJpdiI6InVwUWpQUnAwN2w2OFU4eGhsUk11aHc9PSIsInZhbHVlIjoiOExWWk9NdWpDVSs1aFdNSVA5cDh4a1E2NFNoVlF0anZQSFV3UzI1Q1E4T045b0FGc25OQmRjN1YzS2FGK2hvayIsIm1hYyI6IjZlNjNkYTc5YTBkMmYwMzNhOThlZjRkMWI1NTJiMDA0YTI5NDFmNmQ1NWVmMDFhNjM0OTdjODYzNjk0OWZmYzcifQ==' -H 'x-csrf-token: 0vEwLewA4rDtiftLpoYgqeNkIrs6Eyb9gvRiP2Ug' -H 'accept-language: en-GB,en;q=0.9,en-US;q=0.8,zh-CN;q=0.7,zh;q=0.6,zh-TW;q=0.5,id;q=0.4,ms;q=0.3,ja;q=0.2' -H 'x-requested-with: XMLHttpRequest' -H 'cookie: remember_web_59ba36addc2b2f9401580f014c7f58ea4e30989d=eyJpdiI6ImRWSVVuNlZNcERvNXRKMkd6N2hHYmc9PSIsInZhbHVlIjoibHZyNHhReUp1RlNoamZJODZKWlhVQmpsSXNFOTZCeW40M2VWTEJnZzhJKzRYY2VnNjFIanFQRUZkbzh3RlFnQmhVZFF2RmhtS013bjhsc0ZWSVJUcHZmMVVDVUtQOGVDS0lNSXVcLzB5aFJNekJmRlVRUkVZeTJGTTdwTnJ1U0JQRXdac1NjWVNqdWs4XC9JSjZ1dGhTVUhQa29hcWQrUVk5REgrNGdJVTZcL1BVPSIsIm1hYyI6IjkxOTA5MmEwNmY3MmY0MGQ1OTg5YzVlNzJlZGJmMWMzODAyNjhkMzQzMDgwNTgyZGEzYjI4ZWRiYzUyN2I3ODkifQ%3D%3D; laravel_token=eyJpdiI6Iml6YUxjOUxBWHFOOXozazFrUnkxXC9BPT0iLCJ2YWx1ZSI6Ikt1emoxTHJcL05obzVrOXFManJcL3ViSzV4M1Z4TjhGcjlJNHdzNTVteEVFUG5XN0JDcEVqaWVsXC9CNnNxTjl5UStMNG9QRUdQZjNcL1dEQTJGOVZ6cDZ2Nk1TMGZNTzBBS01tQiswZjgwV3lIaVpXR25BTm13MDhNeWV2S3cyNU0xYmNxNGxcL0JVQ3BKclF5eUNMMmc3TnF5THR4MFl6VnRCS3lJR0RCSWhBb3YwZHBMUGFqZ25NcEtiT0RnenJsRmFnZjgwSDJCTHhISEVueW51amNDVXpcL0JYdzY2blAwYTFBTXpnb05EMElEdGJrOTQ2a2pNNVhMVWJtUU55OWxrczYiLCJtYWMiOiJkM2Q0NTU3ZDVjZDY0NWM0MDM2MjQ3Njk4N2Y3NzY0OThlMTJiYjllMWFlMjNjN2JmMWUxN2E3ZTFmYmJkM2Y2In0%3D; XSRF-TOKEN=eyJpdiI6InVwUWpQUnAwN2w2OFU4eGhsUk11aHc9PSIsInZhbHVlIjoiOExWWk9NdWpDVSs1aFdNSVA5cDh4a1E2NFNoVlF0anZQSFV3UzI1Q1E4T045b0FGc25OQmRjN1YzS2FGK2hvayIsIm1hYyI6IjZlNjNkYTc5YTBkMmYwMzNhOThlZjRkMWI1NTJiMDA0YTI5NDFmNmQ1NWVmMDFhNjM0OTdjODYzNjk0OWZmYzcifQ%3D%3D; longvision_malaysia_stock_management_session=eyJpdiI6IkV3TjJGOFhzdkdKTEpCKzJuVjZUYkE9PSIsInZhbHVlIjoidTNFXC9rbUg3S2JubXErZm1VN3JEOGhXbEx6QXBCYVpWTldvcHQ0UDM2WEhCTHBWNVwvV1FwSDVKYTlwdDMzTG5hIiwibWFjIjoiY2M0ZGRlZjUzYWIwMWE2M2U2YjVjYjUwMGNhMzNmNGVjZDcxMzcwZDczZDY3Njc0OWM5NzI2YTY1MjE2ZTEwOCJ9' -H 'accept-encoding: gzip, deflate, br' -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36' -H 'content-type: application/json;charset=UTF-8' -H 'accept: application/json, text/plain, */*' -H 'referer: https://lvm-stock.test/request-assets-add' -H 'authority: lvm-stock.test' --data-binary '{"qty":{"1":0,"2":0},"remark":"","customer":""}' --compressed

//After refresh the page, it updated the CSRF Token value which is working
curl 'https://project-a.test/api/add-stock' -H 'origin: https://project-a.test' -H 'x-xsrf-token: eyJpdiI6InVwUWpQUnAwN2w2OFU4eGhsUk11aHc9PSIsInZhbHVlIjoiOExWWk9NdWpDVSs1aFdNSVA5cDh4a1E2NFNoVlF0anZQSFV3UzI1Q1E4T045b0FGc25OQmRjN1YzS2FGK2hvayIsIm1hYyI6IjZlNjNkYTc5YTBkMmYwMzNhOThlZjRkMWI1NTJiMDA0YTI5NDFmNmQ1NWVmMDFhNjM0OTdjODYzNjk0OWZmYzcifQ==' -H 'x-csrf-token: kmp9fz2SGMXx0gEYuUymH5eNitgCs6IoDwNE68kX' -H 'accept-language: en-GB,en;q=0.9,en-US;q=0.8,zh-CN;q=0.7,zh;q=0.6,zh-TW;q=0.5,id;q=0.4,ms;q=0.3,ja;q=0.2' -H 'x-requested-with: XMLHttpRequest' -H 'cookie: remember_web_59ba36addc2b2f9401580f014c7f58ea4e30989d=eyJpdiI6ImRWSVVuNlZNcERvNXRKMkd6N2hHYmc9PSIsInZhbHVlIjoibHZyNHhReUp1RlNoamZJODZKWlhVQmpsSXNFOTZCeW40M2VWTEJnZzhJKzRYY2VnNjFIanFQRUZkbzh3RlFnQmhVZFF2RmhtS013bjhsc0ZWSVJUcHZmMVVDVUtQOGVDS0lNSXVcLzB5aFJNekJmRlVRUkVZeTJGTTdwTnJ1U0JQRXdac1NjWVNqdWs4XC9JSjZ1dGhTVUhQa29hcWQrUVk5REgrNGdJVTZcL1BVPSIsIm1hYyI6IjkxOTA5MmEwNmY3MmY0MGQ1OTg5YzVlNzJlZGJmMWMzODAyNjhkMzQzMDgwNTgyZGEzYjI4ZWRiYzUyN2I3ODkifQ%3D%3D; laravel_token=eyJpdiI6Iml6YUxjOUxBWHFOOXozazFrUnkxXC9BPT0iLCJ2YWx1ZSI6Ikt1emoxTHJcL05obzVrOXFManJcL3ViSzV4M1Z4TjhGcjlJNHdzNTVteEVFUG5XN0JDcEVqaWVsXC9CNnNxTjl5UStMNG9QRUdQZjNcL1dEQTJGOVZ6cDZ2Nk1TMGZNTzBBS01tQiswZjgwV3lIaVpXR25BTm13MDhNeWV2S3cyNU0xYmNxNGxcL0JVQ3BKclF5eUNMMmc3TnF5THR4MFl6VnRCS3lJR0RCSWhBb3YwZHBMUGFqZ25NcEtiT0RnenJsRmFnZjgwSDJCTHhISEVueW51amNDVXpcL0JYdzY2blAwYTFBTXpnb05EMElEdGJrOTQ2a2pNNVhMVWJtUU55OWxrczYiLCJtYWMiOiJkM2Q0NTU3ZDVjZDY0NWM0MDM2MjQ3Njk4N2Y3NzY0OThlMTJiYjllMWFlMjNjN2JmMWUxN2E3ZTFmYmJkM2Y2In0%3D; XSRF-TOKEN=eyJpdiI6InVwUWpQUnAwN2w2OFU4eGhsUk11aHc9PSIsInZhbHVlIjoiOExWWk9NdWpDVSs1aFdNSVA5cDh4a1E2NFNoVlF0anZQSFV3UzI1Q1E4T045b0FGc25OQmRjN1YzS2FGK2hvayIsIm1hYyI6IjZlNjNkYTc5YTBkMmYwMzNhOThlZjRkMWI1NTJiMDA0YTI5NDFmNmQ1NWVmMDFhNjM0OTdjODYzNjk0OWZmYzcifQ%3D%3D; longvision_malaysia_stock_management_session=eyJpdiI6IkV3TjJGOFhzdkdKTEpCKzJuVjZUYkE9PSIsInZhbHVlIjoidTNFXC9rbUg3S2JubXErZm1VN3JEOGhXbEx6QXBCYVpWTldvcHQ0UDM2WEhCTHBWNVwvV1FwSDVKYTlwdDMzTG5hIiwibWFjIjoiY2M0ZGRlZjUzYWIwMWE2M2U2YjVjYjUwMGNhMzNmNGVjZDcxMzcwZDczZDY3Njc0OWM5NzI2YTY1MjE2ZTEwOCJ9' -H 'accept-encoding: gzip, deflate, br' -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36' -H 'content-type: application/json;charset=UTF-8' -H 'accept: application/json, text/plain, */*' -H 'referer: https://project-a.test/request-assets-add' -H 'authority: project-a.test' --data-binary '{"qty":{"1":0,"2":0},"remark":"","customer":""}' --compressed

我认为通常 Laravel 只会返回一般消息“未经身份验证。”。如何通知用户这不是未经身份验证的错误，但他们只需要刷新页面。还是可以提示消息？

我尝试在app/Exceptions/Handler.php 添加以下行：-

public function render($request, Exception $exception)
    {
        if ($exception instanceof \Illuminate\Session\TokenMismatchException) {
            return response()->view('index', ['message' => 'custom message'], 500);
        }
        return parent::render($request, $exception);
    }

但它仍然返回未经验证的错误。

Laravel Framework: v5.7.24
Laravel Passport: v7.1.0
VueJS: v2.5.21

Answer 1

我认为您应该自定义令牌不匹配错误消息，然后将其显示给您的用户。 请检查以下帖子以自定义错误响应。

How to handle Token Mismatch Exception