ASP.NET Authentication结合登录模态框的权限控制实现问题

核心思路 #

默认[Authorize]过滤器触发未授权校验时会返回302重定向到配置的登录页，我们只需要修改授权挑战的响应逻辑，将重定向行为改为返回原页面加标识，由前端识别标识后弹出模态框即可。 #

实现步骤 #

1. 修改认证服务配置（全局生效） #

在Program.cs（.NET 6+）或Startup.cs（.NET 5及更早）的Cookie认证配置中，重写定向登录的触发事件：

builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie(options =>
    {
        options.LoginPath = "/Account/Login"; // 原有配置保留，供需要独立登录页的场景使用
        options.Events = new CookieAuthenticationEvents
        {
            OnRedirectToLogin = context =>
            {
                // AJAX请求直接返回401状态码，供前端拦截
                if (context.Request.Headers["X-Requested-With"] == "XMLHttpRequest")
                {
                    context.Response.StatusCode = StatusCodes.Status401Unauthorized;
                    return Task.CompletedTask;
                }
                // 普通页面请求，跳回来源页并携带需要登录的标识
                var referer = context.HttpContext.Request.Headers["Referer"].FirstOrDefault() ?? "/";
                var targetUrl = Uri.EscapeDataString(context.HttpContext.Request.Path);
                context.Response.Redirect($"{referer}?requireLogin=1&returnUrl={targetUrl}");
                return Task.CompletedTask;
            }
        };
    });

2. 公共布局页加模态框与触发逻辑 #

在全局布局页_Layout.cshtml中加入登录模态框的DOM结构，默认设置为隐藏，同时加入触发逻辑：

document.addEventListener('DOMContentLoaded', () => {
    const urlParams = new URLSearchParams(window.location.search);
    // 检测到需要登录的标识
    if (urlParams.get('requireLogin') === '1') {
        // 弹出登录模态框
        document.getElementById('login-modal').style.display = 'block';
        // 存储登录成功后要跳转的地址
        window.loginReturnUrl = urlParams.get('returnUrl') || '/';
        // 清除url参数，避免刷新页面重复弹出
        window.history.replaceState({}, document.title, window.location.pathname);
    }
    // 可选：拦截所有带授权标识的链接点击，提前校验登录状态，避免跳转刷新
    document.querySelectorAll('a[data-authorize="true"]').forEach(link => {
        link.addEventListener('click', e => {
            e.preventDefault();
            const target = link.getAttribute('href');
            // 发起预检请求判断登录状态
            fetch('/Account/CheckAuth', { credentials: 'include' })
                .then(res => {
                    if (res.ok) window.location.href = target;
                    else {
                        document.getElementById('login-modal').style.display = 'block';
                        window.loginReturnUrl = target;
                    }
                })
        })
    })
})

给Secret页面的导航链接加上data-authorize="true"属性即可实现无刷新校验。

3. 登录接口适配 #

登录请求验证通过后，判断是否存在loginReturnUrl，存在则跳转到对应地址，否则跳转到首页即可。

可选：自定义授权过滤器（局部生效） #

如果不需要全局修改授权逻辑，可以自定义过滤器单独给需要弹模态框的Action使用：

public class ModalAuthorizeAttribute : AuthorizeAttribute, IAuthorizationFilter
{
    public void OnAuthorization(AuthorizationFilterContext context)
    {
        if (!context.HttpContext.User.Identity.IsAuthenticated)
        {
            var referer = context.HttpContext.Request.Headers["Referer"].FirstOrDefault() ?? "/";
            var returnUrl = Uri.EscapeDataString(context.HttpContext.Request.Path);
            context.Result = new RedirectResult($"{referer}?requireLogin=1&returnUrl={returnUrl}");
        }
    }
}

使用时替换原有[Authorize]为[ModalAuthorize]即可。 #

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