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:
Provide 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.
After using this pattern for a few weeks I did notice some aspect that can be a bit noisy, I sometimes get several alerts when multiple ajax requests fire after the user session has expired, but it only happens occasionally and our users don't mind. If someone has a nice pattern for avoiding multiple alerts, please comment.