Laravel与AJAX 401未授权：如何实现前端提示或跳转登录？

嘿，这个场景太常见了——后台返回401但用户完全没感知，按钮点了没反应真的很糟心！你只需要给AJAX请求补上错误处理回调，就能轻松实现你要的两种效果，下面给你具体代码：

方案1：弹出"您需要登录"提示框 #

直接在$.ajax配置里添加error函数，捕获401状态码后弹出提示：

$('.visit').on('click', function (event) { 
    event.preventDefault(); 
    var buttonToChange = $(this); 

    $.ajax({ 
        method: 'POST', 
        url: urlVisit, 
        data: { 
            place_id: $(event.target).data("id"), 
            _token: token 
        }, 
        success: function(){ 
            // 原有的按钮状态切换逻辑不变
            if(buttonToChange.hasClass('btn-visited')){
                buttonToChange.addClass('btn-not-visited');
                buttonToChange.removeClass('btn-visited');
                buttonToChange.html('Not Visited'); 
            } else{ 
                buttonToChange.addClass('btn-visited');
                buttonToChange.removeClass('btn-not-visited');
                buttonToChange.html('Visited'); 
            } 
        },
        // 新增错误处理
        error: function(xhr) {
            // 判断是否是401未授权错误
            if(xhr.status === 401) {
                alert('您需要登录');
                // 可选：把按钮恢复初始状态，避免用户困惑
                // buttonToChange.html('Visit');
            }
        }
    }); 
});

方案2：直接重定向到登录页面 #

如果更希望引导用户去登录，把提示换成页面跳转就行：

// 替换上面error里的代码
error: function(xhr) {
    if(xhr.status === 401) {
        // 替换成你的实际登录页面路径
        window.location.href = '/login';
    }
}

额外小提示 #

• 如果你用的是前端框架（比如Vue/React），可以结合全局拦截器统一处理401，不用每个请求都写error回调；但原生jQuery AJAX这样写完全够用。
• 可以把alert换成更美观的自定义模态框，提升用户体验，核心逻辑都是捕获401状态后执行对应操作。

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