Login page open in partial view while using ng-include

Question

I am using the following code for Session and Authentication timeout:

public class AuthCheckService : AuthorizeAttribute
{
    protected override void HandleUnauthorizedRequest(AuthorizationContext filterContext)
    {
        if (HttpContext.Current.Session.Count == 0 || HttpContext.Current.Session["NovellID"] == null || HttpContext.Current.Session["UserRole"] == null)
        {

            if (filterContext.RequestContext.HttpContext.Request.IsAjaxRequest())
            {
                //Ajax request doesn't return to login page, it just returns 403 error.
                filterContext.HttpContext.Response.Clear();
                filterContext.HttpContext.Response.StatusCode = 501;
                throw new ModelStateException("Your Session has expired- Please login again!");
            }
            else
            {
                //base.HandleUnauthorizedRequest(filterContext);
                filterContext.Result = new RedirectToRouteResult(new RouteValueDictionary(new { action = "Login", controller = "Account" }));
            }

        }
        else if (filterContext.HttpContext.Request.IsAuthenticated)
        {
            // Otherwise the reason we got here was because the user didn't have access rights to the
            // operation, and a 403 should be returned.
            filterContext.Result = new HttpStatusCodeResult(403);
        }
        else
        {
            base.HandleUnauthorizedRequest(filterContext);
        }

    }

}

public class SessionCheckService : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        if (HttpContext.Current.Session.Count == 0 || HttpContext.Current.Session["NovellID"] == null || HttpContext.Current.Session["UserRole"] == null)
        {
            if (filterContext.HttpContext.Request.IsAjaxRequest())
            {
                filterContext.HttpContext.Response.Clear();
                filterContext.HttpContext.Response.StatusCode = 501;
                throw new ModelStateException("Your Session has expired- Please login again!");
            }
            else
            {
               // HttpContext.Current.Response.Redirect(Helper.SiteURL + "Account/Login");
                //filterContext.Result = new RedirectResult(Helper.SiteURL + "Account/Login");
               // return;
                //base.OnActionExecuting(filterContext);
                filterContext.Result = new RedirectToRouteResult(new RouteValueDictionary(new { action = "Login", controller = "Account" }));
            }
        }
        base.OnActionExecuting(filterContext);

    }
}

but on session expire i am getting the following screen.

I am using angular. when i click on Open Edit Overdue Tasks on session expire then i am getting the above screen.

HTML:

 <div ng-app="myApp">
    <div ng-controller="AdminController">
        <div class="container">
            @Html.AntiForgeryToken()
            <section class="full-length mtop10">
                <div class="ui-tabs ui-widget ui-widget-content">
                    <div class="area-top clearfix" id="TaskListButtons">
  <div class="return-pop-btn1">

                            <input type="button" value="Edit Overdue Tasks" class="btn-primary i-editoverdue" ng-click="OpenEditOverdueTasks()" id="EditOverdueTasks">
                        </div>
 </div>

                <div class="clearFix"></div>
            </section>
        </div>

 <div id="popupView" ng-include="template.url">
        </div>
  </div>
</div>

JS:

(function () {
//var myApp = angular.module("AdminModule", ['ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.edit']);
var app = angular.module('myApp');
 app.controller('AdminController', ['$scope', 'uiGridConstants', function  ($scope, uiGridConstants) {
 $scope.templates = [
        { name: 'TaskForm', url: 'Template/taskform' },
        { name: 'taskassignment', url: 'Template/taskassignment' },
        { name: 'export', url: 'Template/export' },
        { name: 'blank', url: 'Template/blank' },
        { name: 'maintenanceplan', url: 'Template/maintenanceplandetails' },
        { name: 'editoverduetasks', url: 'Template/editoverduetasks' },
    ];

  $scope.OpenEditOverdueTasks = function () {
        showProgress();
        $scope.template = $scope.templates[5];
        window.setTimeout(function () {
            //localStorage.removeItem('hdnIsEditOverDue');
            if($('#EditOverDuePopup').length == 1)
            {
                $('#EditOverDuePopup').css('display', 'block');
                $('#exposeMaskEditOverDue').css('display', 'block');
                //hideProgress();
            }
            else
            {
                window.setTimeout(function () {
                    $('#EditOverDuePopup').css('display', 'block');
                    $('#exposeMaskEditOverDue').css('display', 'block');
                    //hideProgress();
                }, 4000);
            }
        }, 5000);  
    };
}]);
})();

Please let me know where is am going wrong.

Possible duplicate of [Redirect Partial View to login page when session expires](http://stackoverflow.com/questions/38475165/redirect-partial-view-to-login-page-when-session-expires) — User3250, May 03 '17 at 10:22
Here is an elegant solution, I follow for ajax session timeout http://www.adambielecki.com/2014/04/prevent-displaying-log-in-page-in.html — Anil, May 03 '17 at 10:23

Ashiquzzaman · Answer 1 · 2017-05-04T11:36:42.463

Example:

[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, Inherited = true, AllowMultiple = true)]
public class UserAuthorizeAttribute : AuthorizeAttribute
{
    protected override bool AuthorizeCore(HttpContextBase httpContext)
    {
        var isAuthorized = base.AuthorizeCore(httpContext);

        //    return httpContext.Session != null && httpContext.Session.Count != 0;
        return isAuthorized;

    }

    protected override void HandleUnauthorizedRequest(AuthorizationContext filterContext)
    {
        if (!filterContext.HttpContext.User.Identity.IsAuthenticated)
        {
            filterContext.Result = new HttpUnauthorizedResult();
            if (filterContext.HttpContext.Request.IsAjaxRequest())
            {
                filterContext.HttpContext.Response.StatusCode = 401;
                filterContext.HttpContext.Response.End();
            }
            else
            {
                filterContext.Result = new RedirectToRouteResult(LoginRougte());
            }

        }
        else if (!Roles.Split(',').Any(filterContext.HttpContext.User.IsInRole))
        {

            filterContext.Result = new HttpUnauthorizedResult();
            if (filterContext.HttpContext.Request.IsAjaxRequest())
            {
                filterContext.HttpContext.Response.StatusCode = 401;
                filterContext.HttpContext.Response.End();
            }
            else
            {
                filterContext.Result = new RedirectToRouteResult(new RouteValueDictionary
                {
                    {"action", "Index"},
                    {"controller", "Login"},
                    {"area", ""}
                });
                filterContext.Result = new RedirectToRouteResult(LoginRougte());
            }
        }
        else
        {
            base.HandleUnauthorizedRequest(filterContext);
        }


    }

    private RouteValueDictionary LoginRougte()
    {
        return new RouteValueDictionary
                    {
                        {"action", "Index"},
                        {"controller", "Login"},
                        {"area", ""}
                    };
    }
}

Hopefully it's work for you.

@Sunny sorry. I put a full example which i make and test today. please try this one. — Ashiquzzaman, May 04 '17 at 11:39

score 0 · Accepted Answer · answered May 11 '17 at 09:49

I got solution by using Interceptor.

Main.js:

(function () {
'use strict';
angular.module("myApp", ['ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.edit', 'lr.upload']);
angular.module('myApp').config(['$httpProvider', function ($httpProvider) {
    var interceptor = ['$q', '$window', '$location', '$injector', function ($q, $window, $location, $injector) {
        return {
            request: function (config) {
                config.headers = config.headers || {};
                if ($window.sessionStorage.token) {
                    config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
                }
                return config;
            },

            requestError: function (rejection) {
                return $q.reject(rejection);
            },

            response: function (response) {
                              var responseHeaders;
                              responseHeaders = response.headers();
                              var content = responseHeaders["content-type"];

                              if (content!=undefined && content
                                       .indexOf("text/html") !== -1
                                     && response.data
                                     && response.data
                                         .indexOf('<meta name="unauthorized" content="true">') !== -1) {
                                  $window.location.reload();
                                  return $q.reject(response);
                              }
                              return response;
            }
        };
    }];

    $httpProvider.interceptors.push(interceptor);
}]);

 })();

Login.cshtml: In login.cshtml i added meta tag there.

<meta name="unauthorized" content="true">

Hope this will help someone else.

Login page open in partial view while using ng-include

2 Answers2