如何在Laravel9+Vue应用中集中检测AJAX请求的会话超时？

一、前端统一处理AJAX错误与超时 #

针对上百个AJAX请求，无需逐个编写错误逻辑，用jQuery全局配置统一处理：

1. 全局AJAX配置（入口文件/全局JS中） #

// 全局设置AJAX默认参数与错误回调
$.ajaxSetup({
    timeout: 30000, // 全局请求超时时间（30秒，可按需调整）
    error: function(xhr, status, err) {
        // 处理请求超时
        if (status === 'timeout') {
            alert('请求超时，请稍后重试');
            // 可替换为项目全局提示组件，比如this.$message.error(...)
        }

        // 处理会话超时（匹配Laravel返回的状态码）
        if (xhr.status === 419 || xhr.status === 401) {
            // 清除所有定时器，避免无效请求持续发起
            if (window.notificationTimer) clearInterval(window.notificationTimer);
            
            alert('会话已超时，请重新登录');
            // 跳转到自定义超时页面或登录页
            window.location.href = '/session-timeout';
        }

        // 处理服务器内部错误
        if (xhr.status === 500) {
            alert('服务器出错，请稍后重试');
        }
    }
});

2. 组件内定时器管理 #

如果定时器在Vue组件中，需在组件销毁时主动清除，避免内存泄漏：

export default {
    data() {
        return {
            notificationTimer: null
        }
    },
    mounted() {
        // 每分钟发起一次请求
        this.notificationTimer = setInterval(() => {
            this.fetchNotifications();
        }, 60000);
    },
    beforeUnmount() {
        // 组件销毁前清除定时器
        clearInterval(this.notificationTimer);
    },
    methods: {
        fetchNotifications() {
            $.ajax({
                url: "/user/currentUserInfoAndNotifications",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                method: "post",
                data: {},
                dataType: "json",
                success: function(data) {
                    // 业务逻辑处理
                }.bind(this)
                // 无需单独写error，全局配置已覆盖
            });
        }
    }
}

二、Laravel后端集中检测会话超时 #

通过自定义中间件实现全局/路由组级别的会话检测，无需在每个控制器中重复判断：

1. 创建会话检测中间件 #

执行命令生成中间件：

php artisan make:middleware CheckAjaxSession

编辑app/Http/Middleware/CheckAjaxSession.php：

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class CheckAjaxSession
{
    public function handle(Request $request, Closure $next)
    {
        // 仅对AJAX请求做会话检测
        if ($request->ajax() && !Auth::check()) {
            // 返回419状态码（Laravel默认CSRF/会话过期状态码）
            return response()->json(['msg' => '会话已超时'], 419);
        }

        return $next($request);
    }
}

2. 注册并启用中间件 #

• 全局生效：在app/Http/Kernel.php的$middlewareGroups['web']中添加中间件：

protected $middlewareGroups = [
    'web' => [
        // ...其他原有中间件
        \App\Http\Middleware\CheckAjaxSession::class,
    ],
];

• 指定路由组生效：先在Kernel.php的$routeMiddleware中注册别名：

protected $routeMiddleware = [
    // ...其他原有中间件
    'check.ajax.session' => \App\Http\Middleware\CheckAjaxSession::class,
];

然后在routes/web.php中给目标路由组绑定：

Route::middleware(['web', 'check.ajax.session'])->group(function () {
    Route::post('/user/currentUserInfoAndNotifications', [UserController::class, 'getUserInfoAndNotifications']);
    // 其他需要检测会话的AJAX路由...
});

3. 调整会话超时配置（可选） #

在config/session.php中修改会话有效期：

'lifetime' => 120, // 单位：分钟，按需调整
'expire_on_close' => false,

内容的提问来源于stack exchange，提问作者user761100