Authorize attribute and jquery AJAX in asp.net MVC

Working example: https://github.com/ronnieoverby/mvc-ajax-auth

Important parts:

AjaxAuthorizeAttribute:

using System.Web.Mvc;

namespace MvcApplication1
{
    public class AjaxAuthorizeAttribute : AuthorizeAttribute
    {
        protected override void HandleUnauthorizedRequest(AuthorizationContext context)
        {
            if (context.HttpContext.Request.IsAjaxRequest())
            {
                var urlHelper = new UrlHelper(context.RequestContext);
                context.HttpContext.Response.StatusCode = 403;
                context.Result = new JsonResult
                {
                    Data = new
                    {
                        Error = "NotAuthorized",
                        LogOnUrl = urlHelper.Action("LogOn", "Account")
                    },
                    JsonRequestBehavior = JsonRequestBehavior.AllowGet
                };
            }
            else
            {
                base.HandleUnauthorizedRequest(context);
            }
        }
    }
}

Javascript:

    $(function () {
        $(document).ajaxError(function (e, xhr) {
            if (xhr.status == 403) {
                var response = $.parseJSON(xhr.responseText);
                window.location = response.LogOnUrl;
            }
        });
    });

Use the attribute in a controller:

    [AjaxAuthorize]
    public ActionResult Secret()
    {
        return PartialView();
    }

Do some ajax:

@Ajax.ActionLink("Get Secret", "Secret", new AjaxOptions { UpdateTargetId = "secretArea", })

<div id="secretArea"></div>

Just a handy addition to #Ronnie's answer

if you want to keep the page url on redirect.

 var pathname = window.location.pathname;
        if (xhr.status == 403) {
                var response = $.parseJSON(xhr.responseText);
                window.location = response.LogOnUrl + '?ReturnUrl=' + pathname;
            }

As another extension to Ronnie Overby's answer.

His solution doesn't work with webapi, but this is fine because you can use normal Authorize attribute instead and then handle the 401 status in the ajaxError function as follows.

    $(document).ajaxError(function (e, xhr) {
    //ajax error event handler that looks for either a 401 (regular authorized) or 403 (AjaxAuthorized custom actionfilter). 
    if (xhr.status == 403 ||xhr.status == 401) {
       //code here
    }
});

If you will observe in the network tab, you will see that the despite the status code being a 200, the server responds with X-Responded-JSON which can be parsed to get the actual server status code response which is 401 in this case so you can handle the response from the Authorize attribute in your AJAX call like this in your .cshtml View file:

$.ajax({
    url: '@Url.Action("MyMethod", "MyController")',
    type: "POST",
    dataType: "html",
    data: myData,
    success: function (data, textStatus, xhr) {
        //For handling 401 with Authorize attribute on Controller
        if (xhr.getResponseHeader("X-Responded-JSON") != null && JSON.parse(xhr.getResponseHeader("X-Responded-JSON")).status == "401") {
            alert("Unauthorized access returned by Controller");
            //Will redirect to login page
            location.reload(true);
        }
        else {
            alert("Still Authorized");
        }
    },
    error: function (err) {
        alert("There was a technical error");
        console.log(err)
    },
});