automatically redirect page in angularjs - ruby-on-rails

Question

In a angularjs project, I want when user doesn't sign in, page is automatically redirect to login page. For this, I when user want see a page, if doesn't sign in before, I send 401 from rails sever by below code:
def failure
render :status => 401, :json => { :success => false, :info => "Login Credentials Failed" }
end
and I recieve this in chrome browser:
GET http://localhost:3000/api/record.json 401 (Unauthorized) angular.min.js?body=1:81
(anonymous function) angular.min.js?body=1:81
t angular.min.js?body=1:76
f angular.min.js?body=1:74
I angular.min.js?body=1:102
I angular.min.js?body=1:102
(anonymous function) angular.min.js?body=1:103
h.$eval angular.min.js?body=1:114
h.$digest angular.min.js?body=1:111
h.$apply angular.min.js?body=1:115
t angular.min.js?body=1:75
y angular.min.js?body=1:79
x.onreadystatechange
And I have below code in angularjs controller to redirect page:
'use strict';
angular.module('app',['ngRoute', 'ngResource', 'sessionService', 'recordService'])
.config(['$httpProvider', function($httpProvider){
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
var interceptor = ['$location', '$rootScope', '$q', function($location, $rootScope, $q) {
function success(response) {
return response
};
function error(response) {
if (response.status == 401) {
$rootScope.$broadcast('event:unauthorized');
$location.path('/users/login');
return response;
};
return $q.reject(response);
};
return function(promise) {
return promise.then(success, error);
};
}];
// $httpProvider.responseInterceptors.push(interceptor);
$httpProvider.interceptors.push(interceptor);
}])
.config(['$routeProvider',function($routeProvider, $locationProvider){
$routeProvider
.when('/', {controller: 'HomeCtrl', templateUrl: '<%= asset_path('templates/index.html') %>'})
.when('/record', {controller: 'RecordCtrl', templateUrl: '<%= asset_path('templates/record/index.html') %>'})
.when('/users/login', {controller: 'UsersCtrl', templateUrl: '<%= asset_path('templates/users/login.html') %>'})
.when('/users/register', {controller: 'UsersCtrl', templateUrl: '<%= asset_path('templates/users/register.html') %>'})
.otherwise( {redirectTo: '/'});
}]);
Now when I run project and I want accept localhost:3000/#/record, I see the record page without data and page doesn't redirect to login page. How can I fix this probelm and solve it?

Answer 1

You can do like:
angular.module('myapp')
.factory('httpInterceptor', ['$q', '$location',function ($q, $location) {
var canceller = $q.defer();
return {
'request': function(config) {
// promise that should abort the request when resolved.
config.timeout = canceller.promise;
return config;
},
'response': function(response) {
return response;
},
'responseError': function(rejection) {
if (rejection.status === 401) {
canceller.resolve('Unauthorized');
$location.url('/user/signin');
}
if (rejection.status === 403) {
canceller.resolve('Forbidden');
$location.url('/');
}
return $q.reject(rejection);
}
};
}
])
//Http Intercpetor to check auth failures for xhr requests
.config(['$httpProvider',function($httpProvider) {
$httpProvider.interceptors.push('httpInterceptor');
}]);
than in the route
.state('user_actions', {
abstract: true,
templateUrl: 'users/views/actions.html',
resolve: {
hasaccess: function(Sessions){
return Sessions.hasAccess('users');
}
},
controller:'UserParentActionsController'
})
.state('user_actions.create', {
url: '/user/create',
templateUrl: 'users/views/create.html',
resolve: {
groups: function(Groups){
return Groups.getList();
}
},
controller:'UserCreateController'
})