AJAX会话超时重定向到登录页面只显示部分视图/组件

1.在后端代码中，我们需要在AJAX请求超时时返回一个标识符，告诉前端AJAX请求已经超时。例如，在ASP.NET Core中，我们可以在后端代码中使用以下代码：

// Check Session Timeout
if (!HttpContext.Session.TryGetValue("UserName", out byte[] sessionValue))
{
    if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
    {
        Response.StatusCode = StatusCodes.Status401Unauthorized;
        return Json("SessionTimeout");
    }
    else
    {
        return RedirectToAction("Index", "Login");
    }
}

在上面的代码中，我们检查会话是否过期。如果过期了，我们使用Json方法返回一个SessionTimeout字符串。如果请求不是AJAX请求，并且会话已过期，则重定向到登录页面。

2.在前端代码中，我们可以使用以下jQuery代码，检查当AJAX请求超时时，返回的标识符。如果标识符是SessionTimeout，则我们需要重定向到登录页面。

$.ajaxSetup({
    beforeSend: function (xhr) {
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    },
    error: function (xhr, status, error) {
        if (xhr.status == 401 && xhr.responseText == "SessionTimeout") {
            window.location.href = "/Login/Index";
        }
    }
});

在上面的代码中，我们使用ajaxSetup方法，添加一个名为X-Requested-With的Http Header。然后，我们检查当错误发生时，如果返回的状态码是401，并且返回的响应文本是SessionTimeout，则重定向到登录页面。

3.最后，我们需要使用局部视图/组件来显示我们的登录表单。您可以使用以下代码示例创建一个AjaxLogin组件：

@using Microsoft.AspNetCore.Mvc.ViewComponents
@using Microsoft.AspNetCore.Http
@using Microsoft.AspNetCore.Mvc.Rendering

@inject IHttpContextAccessor HttpContextAccessor

<div id="ajax-login-container">
    // Your Login Form Code Here
</div>

<script>
    $(document).ready(function () {
        $('#ajax-login-container').load('/Login/AjaxLogin');
    });
</script>

[ViewComponent(Name = "AjaxLogin")]
public class AjaxLoginViewComponent : ViewComponent
{
    public IViewComponentResult Invoke()
    {
        if (HttpContextAccessor.HttpContext.Request.Headers["X-Requested-With"] != "XMLHttpRequest")
        {
            return Content("");
        }

        return View("~/Views/Login/LoginForm.cshtml");
    }
}

在上面的代码中，我们将