Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Angular - redirect to login after user session expires (including ajax/background processes)

Originally posted on: http://geekswithblogs.net/renso/archive/2016/08/04/angular---redirect-to-login-after-user-session-expires-including.aspx

Environment: 
.Net MVC with Angular v 1

Issue: 
When the user redirects in Angular app or performs any kind of ajax request (searching inside a search box, clicking any button, etc. any event that triggers an Angular $http request to the backend), the user is not aware that they have been logged off from the server. They may redirect to another Angular "page" and search for info and get "weird" server errors.

Goal: 
Pprovide the user an alert and redirect to the login page. Note, this also needs to support a sliding expiration so having a time ticker or counter of some sort on the client will not work in this scenario.

Solution:
Intercept the user requests and redirect.

Step 1:
Register your custom interceptor to your angular app's configuration file:
(function () {
    angular.module('app', ['utils'])
        .config([
            '$httpProvider', '$stateProvider', '$urlRouterProvider', '$locationProvider',
            function ($httpProvider, $stateProvider, $urlRouterProvider, $locationProvider) {
//stuff

//register the interceptor
                $httpProvider.interceptors.push('httpInterceptor');
//more stuff

Step 2:
Create your interceptor as an Angular factory:

angular.module('utils')
    .factory('httpInterceptor', [
        '$q', '$rootScope', function ($q, $rootScope) {
            return {
                'request': function (config) {
                    return config;
                },
                'requestError': function (rejection) {
    //stuff
                },
                // optional method
                'response': function (response) {
                    if (response.status === 200 && angular.isString(response.data) && response.data && response.data.indexOf("") !== -1 && response.data.indexOf("The Password field is required") !== -1) {
                        $rootScope.user = {};
                        alert("Your session has expired. Please log in again...");
                        location.replace($rootScope.baseUrl + "/Account/Login");
                    }
                    return response;
                },
                // optional method
                'responseError': function (rejection) {
                    if (rejection.status === 200 && angular.isString(rejection.data) && rejection.data && rejection.data.indexOf("") !== -1 && rejection.data.indexOf("The Password field is required") !== -1) {
                        $rootScope.user = {};
                        alert("Your session has expired. Please log in again...");
                        location.replace($rootScope.baseUrl + "/Account/Login");
                    }

                    return $q.reject(rejection);
                }
            };

        }
    ]);

That is it! No need for weird round-trips to the server to check if the session is still active. Customize the filter above to match that of your login page to check for content that ensures that the server redirected the user to the login page. This code can also be customized to also check for HTTP authentication status like 401, 403 and others, but be careful here as it may mean the server actively refused the request due to a authorization failure and not because the user has been logged off.







This post first appeared on , please read the originial post: here

Share the post

Angular - redirect to login after user session expires (including ajax/background processes)

×

Subscribe to

Get updates delivered right to your inbox!

Thank you for your subscription

×