无独立登录页面时，如何不跳转页面并在模态窗口中处理和展示登录错误？

其实你现在的实现思路已经完全正确啦！纠结“是否要用redirect”是走入误区了——毕竟你的场景是模态框内登录，核心需求就是在不刷新、不跳转整个页面的前提下完成校验和错误提示，Redirect是服务端控制页面跳转的逻辑，根本不适合这个交互场景。

咱们来拆解下你的方案为什么可行，以及可以微调的地方：

为什么不用Redirect？ #

你的登录流程是前端通过AJAX（也就是你用的fetch）异步提交表单，整个过程都在当前页面内完成。如果服务端返回Redirect，前端需要手动处理跳转逻辑（就像你现在做的那样），但登录失败时用Redirect只会徒增麻烦——总不能跳去某个页面再跳回来打开模态框吧？这完全是舍近求远，所以登录失败时返回错误信息而非Redirect才是正确选择。

你的现有实现的合理性 #

后端代码（ASP.NET Core）

你当前的后端逻辑很清晰：

• 校验登录凭证，失败时返回BadRequest("Invalid login or password")：HTTP 400状态码语义上正好对应“客户端请求参数错误”，完全匹配登录凭证无效的场景；
• 登录成功时返回RedirectToAction，让前端跳转到目标页面，逻辑通顺。

[HttpPost("login")]
public IActionResult Login([FromForm] User user)
{
    if (user.Login is not _login || user.Password is not _password)
        return BadRequest("Invalid login or password");

    var claims = new List<Claim> { new(ClaimTypes.Name, user.Login) };
    var claimsIdentity = new ClaimsIdentity(claims, "CookieAuth");
    var claimsPrincipal = new ClaimsPrincipal(claimsIdentity);

    HttpContext.SignInAsync("CookieAuth", claimsPrincipal).Wait();

    return RedirectToAction("Browse", "Browse");
}

前端HTML

你已经在模态框里预留了错误提示容器<div id="loginError">，这是正确的做法——专门的容器用来展示错误，样式也提前设置了隐藏，需要时再显示。

<div class="modal fade login" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="login-form">
                    <div class="text-center">
                        <h1>Disk</h1>
                    </div>
                    <div id="loginError" class="alert alert-danger text-center" style="display: none;"></div>
                    <form id="loginForm">
                        <div class="form-group mb-3">
                            <input type="text" name="login" class="form-control" id="login" placeholder="Enter login">
                        </div>
                        <div class="form-group mb-3">
                            <input type="password" name="password" id="password" class="form-control" placeholder="Enter Password">
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary w-100 welcome login-button">Login</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

前端JS逻辑

你用fetch拦截表单提交，阻止默认跳转，然后根据响应状态处理：

• 成功时（302重定向）手动跳转到目标页面；
• 失败时提取错误文本，显示在预留的容器里，完全符合需求。

$("#loginForm").on("submit", async function(e) {
    e.preventDefault();

    const form = $(this);
    const formData = new FormData(form[0]);

    try {
        const response = await fetch('/login', {
            method: 'POST',
            body: formData,
        });

        if (response.status === 302) {
            window.location.href = response.headers.get('location');
        } else {
            const errorText = await response.text();
            $('#loginError').show().text(errorText);
        }
    } catch (error) {
        console.log("Fetch error:", error);
        $('#loginError').show().text('There was an error, try again.');
    }
});

几个小优化建议 #

1. 后端返回结构化错误：可以把错误信息包装成JSON对象，这样前端处理更灵活：

   return BadRequest(new { Message = "Invalid login or password" });
   

   前端对应改成解析JSON：

   const errorData = await response.json();
   $('#loginError').show().text(errorData.Message);
   

2. 统一判断响应状态：用!response.ok来覆盖所有错误状态码（比如400、500等），而不是只判断302：

   if (response.redirected) { // 或者直接用response.status === 302
       window.location.href = response.url;
   } else if (!response.ok) {
       // 处理错误
   }
   

3. 添加loading状态：提交表单时禁用按钮并显示loading，防止用户重复提交：

   const submitBtn = form.find('button[type="submit"]');
   submitBtn.prop('disabled', true).text('Logging in...');
   // 请求完成后恢复
   submitBtn.prop('disabled', false).text('Login');
   

总的来说，你当前的方案已经完美解决了“模态框内登录不跳转、错误提示在模态框内显示”的需求，完全不需要强行用Redirect哦！

备注：内容来源于stack exchange，提问作者amg63