I have been trying to intercept 401 responses when I hit an API but it has been frustratingly not working at all.
When I visit a particular link, on the browser console, I can see that it is responding with 401. Basically I want to redirect it to my login page whenever it encounters such responses. I have seen a lot of the questions here and tried to do something similar but it is not working.
Here is the contents of my main.js file.
var app = angular.module('strelsau_client', ['ngRoute', 'ngResource', 'angularCSS']).config(function ($provide, $httpProvider) {
// Intercept http calls.
$provide.factory('MyHttpInterceptor', function ($q) {
return {
// On request success
request: function (config) {
console.log(config); // Contains the data about the request before it is sent.
// Return the config or wrap it in a promise if blank.
return config || $q.when(config);
},
// On request failure
requestError: function (rejection) {
console.log(rejection); // Contains the data about the error on the request.
// Return the promise rejection.
return $q.reject(rejection);
},
// On response success
response: function (response) {
console.log(response); // Contains the data from the response.
// Return the response or promise.
return response || $q.when(response);
},
// On response failture
responseError: function (rejection) {
console.log(rejection); // Contains the data about the error.
// Return the promise rejection.
return $q.reject(rejection);
}
};
});
// Add the interceptor to the $httpProvider.
$httpProvider.interceptors.push('MyHttpInterceptor');
});
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/bookings/fare.html',
controller: 'BookingsCtrl',
css: ['../assets/css/stylesheet.css']
})
.when('/admin',{
templateUrl:'views/admin/index.html',
controller: 'AdminCtrl',
css: ['../assets/css/vendor.css','../assets/css/flat-admin.css']
})
.when('/admin/taxis',{
templateUrl:'views/admin/taxis.html',
controller: 'AdminCtrl',
css: ['../assets/css/vendor.css','../assets/css/flat-admin.css']
})
.when('/admin/customers',{
templateUrl:'views/admin/customers.html',
controller: 'AdminCtrl',
css: ['../assets/css/vendor.css','../assets/css/flat-admin.css']
})
.when('/admin/set_price', {
templateUrl: 'views/admin/set_price.html',
controller: 'AdminCtrl'
})
.when('/admin/adddriver', {
templateUrl: 'views/admin/add_taxi_driver.html',
controller: 'AdminCtrl'
})
.when('/signup', {
templateUrl: 'views/signup.html',
controller: 'AccountCtrl'
})
.otherwise({
redirectTo: '/'
});
});
I'm gonna post my working code below so you can compare and adjust yours:
angular.module("application").config(['$httpProvider' ,function($httpProvider) {
$httpProvider.interceptors.push(['$rootScope','$q','$location','$injector', function($rootScope, $q, $location, $injector) {
return {
responseError: function(rejection) {
var $state = $injector.get('$state');
if(rejection.status <= 0) {
}else if (rejection.status == 401) {
// Here I pick my 401
}else if (rejection.status == 404) {
//$state.go('404');
}else if (rejection.status == 500) {
$state.go('500');
}
return $q.reject(rejection);
}
};
}
]);
}
]);
Hope it helps =)
I finally did the interception at the service level. Here is how I did it :
app.service('AdminService', function($resource) {
return $resource('http://localhost:3000/admin/customers',{},{
query:{
method: 'GET',
interceptor: {
response:function(data){
console.log("success");
},
responseError: function(data){
window.location="/#/admin/login";
}
}
},
});
});
Related
I have a login system...and I'm trying to implement login/logout feature to a website.
This is the fiddle I'm following- FIDDLE
This is my route file:
(function() {
var onlyLoggedIn = function($location, $q, AuthService2) {
var deferred = $q.defer();
if (AuthService2.isLogin()) {
deferred.resolve();
} else {
deferred.reject();
$location.url('/login');
}
return deferred.promise;
};
angular.module('myApp', [
'ngRoute',
'myApp.login',
'myApp.home',
'myApp.logout',
'myApp.notifications'
])
.factory('AuthService2', ["$http", "$location", function($http, $location) {
//var vm = this;
var baseUrl = 'api/';
return {
isLogin: function() {
var token;
if (localStorage['entrp_token']) {
token = JSON.parse(localStorage['entrp_token']);
} else {
token = "";
}
var data = {
token: token
};
$http.post(baseUrl + 'validateUserToken', data).success(function(response) {
if (response.msg == "authorized") {
//console.log(response.msg);
return localStorage.isLogged === "true";
} else {
return localStorage.isLogged === "false";
}
});
}
}
return {
isLogin: isLogin
};
}])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'app/components/login/loginView.html',
controllerAs: 'vm'
})
.when('/home', {
controller: 'HomeController',
templateUrl: 'app/components/home/homeView.html',
resolve: {
loggedIn: onlyLoggedIn
},
controllerAs: 'vm'
})
.when('/logout', {
controller: 'LogoutController',
templateUrl: 'app/components/login/loginView.html',
resolve: {
loggedIn: onlyLoggedIn
},
controllerAs: 'vm'
})
.when('/notifications', {
controller: 'NotificationsController',
templateUrl: 'app/components/notifications/notificationsView.html',
resolve: {
loggedIn: onlyLoggedIn
},
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/login'
});
}]);
})();
Users will be visiting login page. After authentication, I set a session and a local storage token.
I use resolve to check whether the user is valid or not. I defined a function for that (as you can see it from the code).
Upon login, I'm able to validate the user and set the session and login controller redirects the valid user to home. But the user reaches the route and he stays in login page itself.
My http request is fine. I checked it and it returns correct result. But I think the function returns false and afterthat only the http request is getting executed. because I can see the http request in consoel and it returns positive result, so the user should get navigated but it's not happening because http request is getting delayed or something.
I tried giving an alert message inside this if else,and it always goes to else condition, no matter what.
if (AuthService2.isLogin()) {
deferred.resolve();
} else {
deferred.reject();
$location.url('/login');
}
Why is it so? I'm pretty much new to ANgular. Is this a limitation of angular?
The problem is that there is no return statement in your isLogin function.
Your return statement is inside the $http.post callback NOT isLogin hence isLogin return undefined thus resolved to falsy.
$http.post(baseUrl + 'validateUserToken', data).success(function(response) {
//Notice that you are inside function(response) closure.
if (response.msg == "authorized") {
return localStorage.isLogged === "true";
} else {
return localStorage.isLogged === "false";
}
});
I can suggest you to return $http.post instead, $http.post return a promise object which you can use in such way, below is an brief example on how you can do it.
isLogin: function() {
//Omitted some code
//This method return a promise object
return $http.post(baseUrl + 'validateUserToken', data);
});
AuthService2.isLogin().then(function(res){
if (response.msg == "authorized") {
deferred.resolve();
} else {
deferred.reject();
$location.url('/login');
}
}, errorCallback); //Optional if you want to handle when post request failed
Code is not tested, just to give you the idea.
Is it possible to set a default action for $http in my app?
The idea would be that if any $http call in a controller, or service of my app would return 405, I could change to state 'login'
Something like this (of course this will not work at all, but I guess that shows the idea)
angular.module('app',[]).config(function($http){
$http.error(function(error,state){
if (state===405){
do stuff
}
);
You can use interceptors to achieve this.
// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
return {
// optional method
'request': function(config) {
// do something on success
return config;
},
// optional method
'requestError': function(rejection) {
// do something on error
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
},
// optional method
'response': function(response) {
// do something on success
return response;
},
// optional method
'responseError': function(rejection) {
// do something on error
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
}
};
});
$httpProvider.interceptors.push('myHttpInterceptor');
// alternatively, register the interceptor via an anonymous factory
$httpProvider.interceptors.push(function($q, dependency1, dependency2) {
return {
'request': function(config) {
// same as above
},
'response': function(response) {
// same as above
}
};
});
Read more about it here
You should do something like this:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
//Do whatever you want on success
}, function errorCallback(response) {
if(response.status == 405) {
//Go to login
}
});
Below code might help you:
$http.get("url")
.success(function (data, status, headers, config) {
$scope.content = data;
if (data == '405') {
$state.go('login', {id: the_necesarry_id});
}
else {window.alert(' ');}
})
.error(function (data, status, headers, config) {
});
use angularjs Interceptors
// interceptors.js
.factory('httpInterceptor', function ($q, $injector) {
return {
'requestError': function(rejection) {
// do something on error
if(rejection.status === 405){
$injector.get('$state').transitionTo('login');
}
return $q.reject(rejection);
},
'responseError': function(rejection) {
// do something on error
if(rejection.status === 405){
$injector.get('$state').transitionTo('login');
}
return $q.reject(rejection);
}
};
});
// app.js
app.config( function ($httpProvider, $interpolateProvider, $routeProvider) {
$httpProvider.interceptors.push('httpInterceptor');
...
});
The basic idea was to use an Http Response Interceptor to redirect my webpage if it gives an 401 status. But i don't know if i am doing this the right way: i thought it was something like this but i seems more difficult than it seems. At the moment i get an Circular dependency found.
Do i need to push the interceptor somewhere else? And how can the interceptor know if i get an 401 request. is it also possible to define which 401 needs to be intercept and which ones ignored
(function () {
'use strict';
angular
.module('app', ['ngRoute','ngCookies','ngMessages'])
.config(routeConfig);
routeConfig.$inject = ['$routeProvider','$httpProvider'];
function routeConfig($routeProvider,$httpProvider) {
$routeProvider
.when('/', {
templateUrl: 'login.html',
controller : 'LoginController'
})
.when('/register', {
templateUrl: 'register.html',
controller : 'RegisterController'
})
.when('/main', {
//This gives an 401 status when the user has not been logged in
templateUrl: 'home.html',
controller : 'HomeController'
})
.otherwise('/');
// We need to add this for csrf protection
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
//this gives an Circular dependency error
$httpProvider.interceptors.push('HttpResponseInterceptor');
}
})();
This is my service:
(function () {
'use strict';
angular
.module('app')
.factory('HttpResponseInterceptor', HttpResponseInterceptor);
HttpResponseInterceptor.$inject = ['$rootScope','$http','$q','$location'];
function HttpResponseInterceptor($rootScope,$http,$q,$location) {
return {
response: function(response){
if (response.status === 401) {
}
return response || $q.when(response);
},
responseError: function(rejection) {
if (rejection.status === 401) {
$location.path('/login');
}
return $q.reject(rejection);
}
};
}
})();
Update2
As mention in the comment i was injecting to much stuff. So this is one problem fixed, but now when i go to the login page it makes a request on loading the page (localhost:8080/user) which results in an infinite loop of redirection to the login page and with a browser crash as result.
So is there a way i can say to the Interceptor which url's needed to be redirected and which ones don't
This is answer to 2nd problem ...
You query the rejection object and add some further conditions to your IF statement ...
you can dump rejection object with ...
console.log(JSON.stringify(rejection));
then add conditions to your IF ...
if (rejection.status === 401 && rejection.config.url !== "/url/you/do/not/want/to/change/state/on") {
// do state.go or something else here
}
does injecting services using $injector help?
(function () {
'use strict';
angular
.module('admin')
.factory('HttpInterceptor', httpInterceptor);
httpInterceptor.$inject = [
'$q', // return promises
'$injector' // login service injection
];
function httpInterceptor(q, injector) {
return {
responseError: function (rejection) {
var url = rejection.config ? rejection.config.url : undefined;
var state = injector.get("$state");
if (rejection.status === 401) {
if (!(url === "/api/logout" || state.current.name === "login" && url === "/api/authenticated")) {
var loginService = injector.get('LoginService');
loginService.logout();
}
}
if (rejection.status === 403) {
state.go("home");
}
return q.reject(rejection);
}
};
}
}());
My goal is cancel a xhr request if
the lastest has a 401 status.
With the code below I can cancel
the next request but if I try
to do
an other request (ie do login) is aborted
(it need like canceller.reject(reason))
The flow
1 set a parent route (auth) to check if the login is required
2 set a child root which inheriting the auth state
3 when the app hits the route cancel the request to articles and show a modal login
(function() {
'use strict';
function Auth($http) {
return {
isLoggedIn: function() {
return $http.get('/api/auth/isloggedin');
},
signin: function(data) {
return $http.post('/api/auth/signin', data);
}
};
}
function loginModal($modal, $rootScope,$templateCache) {
function successCallback (data) {
console.log('success',data);
}
function errorCallback (data) {
console.log('fail',data);
}
return {
open : function(){
var modalInstance = $modal.open({
template: $templateCache.get('auth/templates/modal-login.html'),
controller: 'LoginModalController',
controllerAs: 'auth'
});
return modalInstance.result.then(successCallback).catch(errorCallback);
}
};
}
function HttpInterceptor($rootScope,$q) {
var canceller = $q.defer();
return {
'request': function(config) {
config.requestTimestamp = new Date().getTime();
config.timeout = canceller.promise;
return config;
},
'response': function(response) {
response.config.responseTimestamp = new Date().getTime();
return response;
},
'responseError': function(rejection) {
if (rejection.status === 401) {
$rootScope.$emit('no-auth', rejection);
canceller.resolve('Unauthorized');
}
return $q.reject(rejection);
}
};
}
angular.module('auth.services', [])
.factory('Auth', Auth)
.factory('HttpInterceptor', HttpInterceptor)
.factory('loginModal', loginModal);
})();
(function() {
'use strict';
angular.module('auth',
['auth.services','auth.controllers','auth.routes'])
.run(function($rootScope,loginModal,HAS_MODAL_LOGIN){
$rootScope.$on('no-auth', function(event, data) {
if(HAS_MODAL_LOGIN){
loginModal.open();
}
});
});
})();
(function() {
'use strict';
function config($stateProvider,$httpProvider) {
$stateProvider
.state('auth', {
abstract: true,
template: '<ui-view/>',
resolve:{
auth : function(Auth){
return Auth.isLoggedIn();
}
}
});
//Http Intercpetor to check auth failures for xhr requests
$httpProvider.interceptors.push('HttpInterceptor');
}
angular.module('auth.routes', [])
.config(config);
})();
(function() {
'use strict';
function config($stateProvider) {
$stateProvider
.state('auth.articles', {
url: '/articles',
templateUrl: 'articles/templates/index.html',
controller:'ArticlesController as articles',
resolve:{
articlesData : function(Articles){
return Articles.get();
}
}
});
}
angular.module('articles.routes', [])
.config(config);
})();
You do not need to reject. If you have 401 error, then you may simply open login dialog right there. And if user closed dialog, navigate to home.
Please read this article by Gabe Scholz
http://brewhouse.io/blog/2014/12/09/authentication-made-simple-in-single-page-angularjs-applications.html
This is exactly what you try to do but much cleaner way.
I'm trying to redirect my user to Dashboard after Third Party Login. But when success callback is fired, the application still on Login Page, nothing happened. If I refresh the browser my interceptor catch already login and change to Dashboard... My Login Controller looks like this:
ThirdParty.login(function(result){
callbackSUCCESS(result);
},function(){});
function callbackSUCCESS(result){
AuthenticationService.login(result).then(
callbackServerSUCCESS(), function(reject) {
callbackServerERROR(reject);
});
}
function callbackServerSUCCESS() {
$scope.$apply(function() {
$state.go('dashboard');
});
}
My route in app.js
$stateProvider
.state('dashboard', {
url: '/dashboard',
views: {
'': {
templateUrl: 'views/dashboard/dashboard.html',
controller: 'DashboardCtrl'
}
}
});
My Header Controller
.controller('HeaderCtrl', ['$scope', 'AuthenticationService', '$state',
function($scope, AuthenticationService, $state) {
$scope.logout = function() {
AuthenticationService.logout().then(callbackServer(), callbackServer());
};
function callbackServer() {
$state.go('login');
}
}
]);
Authentication Controller Angular Factory
var headersConfig = {
'Cache-Control': 'no-cache',
'Pragma': 'no-cache'
};
return {
login: function(credentials) {
var deferred = $q.defer();
$http.post('/api/users/sign_in', sanitizeCredentials(credentials), {
headers: headersConfig,
timeout: deferred.promise
}).then(function(result) {
if (result.status === 200) {
UserSessionService.cacheSession(result.data);
deferred.resolve();
} else {
deferred.reject();
}
}, function(reject) {
UserSessionService.clean();
deferred.reject(reject);
});
$timeout(function() {
deferred.resolve();
}, 15000);
return deferred.promise;
}
};
I can't remember the exact semantics of $state.go, but usually you need to use $scope.$apply in some manner when responding to events Angular isn't aware of, to ensure a digest cycle occurs. I.e. you could try:
ThirdParty.login(function(result) {
$scope.$apply(function() {
$state.go('dashboard');
});
}, function() {});
You need to get a reference to a scope from somewhere, but one shouldn't be hard to find in an Angular app.
Get rid of both () in
then(callbackServer(), callbackServer())