Laravel：用户登出后CSRF Token失效，需AJAX登出警告提示

看起来你现在的场景是：用户在登录状态下编辑个人资料，AJAX提交后能收到成功提示，但如果用户在其他标签页登出，再点保存就失效了，需要弹出红色警告提示已登出。咱们一步步来解决这个问题：

第一步：修正后端的Auth中间件配置 #

先看你给出的构造函数代码：

public function __construct() { 
    $this->middleware('auth',['except' => 'updateContact']); 
}

这里的except参数意味着**updateContact方法不受Auth中间件保护**，也就是说未登录用户也能调用这个接口，这和你的需求完全相反！我们需要让updateContact必须在用户登录状态下才能访问，所以要把except改成only，或者如果控制器里所有方法都需要登录，直接去掉except参数：

修正后的构造函数（二选一）： #

情况1：只有updateContact需要登录验证

public function __construct() { 
    $this->middleware('auth', ['only' => 'updateContact']); 
}

情况2：控制器所有方法都需要登录验证

public function __construct() { 
    $this->middleware('auth'); 
}

这样调整后，当用户未登录（包括其他标签页登出的情况）调用updateContact接口时，Laravel会自动返回401 Unauthorized的响应状态码，而不是允许请求进入方法逻辑。

第二步：前端AJAX捕获401错误并弹出红色警告 #

接下来需要在前端的AJAX请求里增加错误捕获逻辑，当收到401状态码时，弹出红色警告（样式和成功提示一致，只是颜色改为红色）。

假设你原来的AJAX代码大概是这样的：

$.ajax({
    url: '/path-to-updateContact', // 替换成你的实际接口地址
    method: 'POST',
    data: $('#profile-form').serialize(), // 表单数据
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // 别忘了CSRF令牌
    },
    success: function(response) {
        // 原来的成功提示逻辑
        showNotification('资料保存成功！', 'success');
    },
    error: function(xhr) {
        // 新增错误捕获逻辑
        if (xhr.status === 401) {
            // 弹出红色警告，这里的showNotification是示例函数，替换成你实际的提示组件
            showNotification('您已登出，请重新登录！', 'error');
            // 可选：跳转到登录页，或者刷新当前页
            // window.location.href = '/login';
        } else {
            // 处理其他错误情况
            showNotification('保存失败，请稍后重试！', 'error');
        }
    }
});

提示组件示例（如果没有现成的） #

如果你的项目里还没有统一的提示组件，可以简单实现一个：

function showNotification(message, type) {
    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    notification.textContent = message;
    // 样式：成功为绿色，错误为红色，根据你的需求调整
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 15px 20px;
        border-radius: 4px;
        color: white;
        z-index: 9999;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    `;
    if (type === 'success') {
        notification.style.backgroundColor = '#2ecc71';
    } else if (type === 'error') {
        notification.style.backgroundColor = '#e74c3c';
    }
    document.body.appendChild(notification);
    // 3秒后自动消失
    setTimeout(() => {
        notification.remove();
    }, 3000);
}

第三步：后端updateContact方法的响应规范 #

确保你的updateContact方法在成功时返回正确的JSON响应，比如：

public function updateContact(Request $request) {
    // 验证请求数据
    $validated = $request->validate([
        // 你的验证规则示例
        'name' => 'required|string|max:255',
        'email' => 'required|email|unique:users,email,' . auth()->id(),
    ]);

    // 更新用户资料
    auth()->user()->update($validated);

    // 返回成功响应
    return response()->json([
        'message' => '资料保存成功'
    ], 200);
}

这样前后端配合起来，当用户在其他标签页登出后，点击保存按钮时，AJAX请求会收到401状态码，前端就会弹出红色的登出警告，完美解决你的需求！

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