AngularJS + ASP.NET MVC5 处理后端302重定向问题求助

问题根源 #

后端授权拦截时，对Angular发起的模板AJAX请求直接返回200状态码的登录页HTML，而非标准的401未授权状态。Angular收到200响应后会把登录页插入到模板容器中，导致双重头部；同时因为没有401状态触发跳转逻辑，URL停留在原Angular路由上。

具体解决步骤 #

1. 修改自定义授权属性，区分AJAX请求返回401 #

在AuthorizeAdminUserMvc属性中重写HandleUnauthorizedRequest方法，判断请求是否为AJAX（通过X-Requested-With请求头），如果是则返回401，否则走默认的登录重定向：

protected override void HandleUnauthorizedRequest(AuthorizationContext filterContext)
{
    if (filterContext.HttpContext.Request.IsAjaxRequest())
    {
        filterContext.Result = new HttpStatusCodeResult(HttpStatusCode.Unauthorized);
    }
    else
    {
        base.HandleUnauthorizedRequest(filterContext);
    }
}

2. 配置CookieAuthentication，禁止AJAX请求的重定向 #

在Cookie认证配置文件（通常是Startup.Auth.cs或AuthConfig.cs）中，修改CookieAuthenticationOptions的OnRedirectToLogin事件，对AJAX请求返回401而非重定向：

app.UseCookieAuthentication(new CookieAuthenticationOptions
{
    // 其他原有配置...
    OnRedirectToLogin = context =>
    {
        if (context.Request.Headers["X-Requested-With"] == "XMLHttpRequest")
        {
            context.Response.StatusCode = 401;
            return Task.CompletedTask;
        }
        context.Response.Redirect(context.RedirectUri);
        return Task.CompletedTask;
    }
});

3. 完善Angular HTTP拦截器，捕获401并跳转登录 #

在已有的HTTP拦截器中，添加对401状态码的处理逻辑，跳转到MVC的登录页，并携带当前Angular路由作为ReturnUrl参数：

app.factory('authInterceptor', ['$q', '$window', function($q, $window) {
    return {
        responseError: function(rejection) {
            if (rejection.status === 401) {
                // 拼接当前Angular路由作为跳转参数
                var returnUrl = encodeURIComponent($window.location.hash.substring(1));
                $window.location.href = '/Account/Login?ReturnUrl=' + returnUrl;
            }
            return $q.reject(rejection);
        }
    };
}]);

// 注册拦截器到Angular的HTTP服务
app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('authInterceptor');
}]);

4. 处理登录成功后的跳转 #

在MVC的AccountController的Login Action中，登录成功后判断ReturnUrl是否为Angular路由（以/开头，不含MVC控制器/动作路径），如果是则重定向到根路径并带上哈希路由：

[HttpPost]
public ActionResult Login(LoginViewModel model, string returnUrl)
{
    if (ModelState.IsValid && /* 你的用户验证逻辑 */)
    {
        // 执行登录逻辑...
        if (!string.IsNullOrEmpty(returnUrl) && returnUrl.StartsWith("/"))
        {
            // 跳转到根路径，让Angular处理路由跳转
            return Redirect("/#" + returnUrl);
        }
        return RedirectToAction("Index", "Home");
    }
    return View(model);
}

额外注意事项 #

• 确认Angular的$http请求默认携带X-Requested-With: XMLHttpRequest头，Angular默认会添加该头，若有自定义配置需检查是否被移除。
• 测试前清空浏览器缓存和Cookie，避免旧的认证状态干扰结果。

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