Angular+ASP.NET MVC登录成功后无法跳转至首页问题求助

我来帮你一步步排查并解决这个问题，先从你最初的AngularJS实现说起，再处理后来的jQuery版本问题。

一、AngularJS版本：验证成功后无法跳转 #

你的Angular代码里有几个容易忽略的问题，导致跳转逻辑没触发：

1. 空值判断逻辑错误 #

当用户凭据无效时，后端FirstOrDefault()会返回null，这时候前端的d.data就是null，你直接访问d.data.Username会抛出JS错误，后续的跳转代码根本执行不到。修改判断逻辑：

// 先判断d.data是否存在，再检查用户名
if (d.data != null && d.data.Username != null) {
    var landingUrl = "/Data/Index";
    $scope.IsLogedIn = true;
    $scope.Message = "Successfully login done. Welcome ";
    $window.location.href = landingUrl;
} else { 
    alert('Invalid Credential!'); 
}

2. 相对路径可能存在的问题 #

直接用/Data/Index作为相对路径，可能会因为当前页面的路由前缀导致路径错误。更稳妥的方式是用Angular的$location服务（记得注入到控制器），或者提前用服务器端生成绝对路径：

// 方式1：使用Angular的$location服务（需要在控制器参数中添加$location）
$location.path('/Data/Index');

// 方式2：在Login.cshtml中生成基础路径，传到JS
<script>
    window.baseUrl = '@Url.Content("~/")';
</script>
// 控制器中使用：
$window.location.href = window.baseUrl + "Data/Index";

3. 确认表单提交未被意外阻止 #

确保你的login函数没有返回false，ng-submit会自动处理表单默认提交行为，只要逻辑正常执行就不会有问题。

二、jQuery版本：点击直接跳转不验证 #

你的jQuery代码有两个明显的错误：

1. 无效的验证判断逻辑 #

你在success回调里写了if (true)，这意味着不管后端返回什么结果，都会强制跳转到首页。要根据后端返回的实际结果判断：

success: function (result) {
    // 后端返回的是用户实体，判断是否存在即可
    if (result != null && result.Username != null) { 
        location.href = '/Data/Index'; 
    } else { 
        alert('Invalid Credential!');
    }
}

2. 未阻止表单默认提交行为 #

你的按钮是type="submit"，点击后会触发表单的默认提交（页面刷新），导致AJAX请求还没完成，页面就已经跳转了。需要在事件中阻止默认行为：

$("#send").click(function (e) { 
    e.preventDefault(); // 阻止表单默认提交，让AJAX正常执行
    $.ajax({
        type: 'POST',
        url: '@Url.Action("UserLogin", "Data")', // 注意后端Action是UserLogin，不是Login
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify({ 
            Username: $("#Username").val(), 
            Password: $("#Password").val() 
        }),
        success: function (result) {
            if (result != null && result.Username != null) {
                location.href = '@Url.Action("Index", "Data")';
            } else {
                alert('Invalid Credential!');
            }
        },
        error: function () {
            alert('请求出错，请稍后重试');
        }
    });
});

额外优化建议 #

1. 统一技术栈：尽量选择AngularJS或jQuery其中一种实现登录逻辑，混合使用容易导致状态混乱。如果用AngularJS，推荐用$location而非$window.location做跳转，更符合框架设计。
2. 后端返回格式优化：可以让后端返回包含验证状态的对象，前端判断更清晰：

public JsonResult UserLogin(LoginData d) { 
    using (GestReclamationDBEntities dc = new GestReclamationDBEntities()) { 
        var user = dc.Users.Where(a => a.Username.Equals(d.Username) && a.Password.Equals(d.Password)).FirstOrDefault(); 
        return Json(new { 
            IsSuccess = user != null,
            UserInfo = user
        }, JsonRequestBehavior.AllowGet); 
    } 
}

前端就可以直接判断d.data.IsSuccess来确认登录状态，避免空值访问风险。

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