At first I've had configAuth with headers, including JWT token at every Controller.
var configAuth = {
headers: {
'Content-Type': 'application/json',
'Authorization': localStorage.getItem('token')
}
};
But now when I have great ammount of Controllers, I realized that I need to do something about it. I've heard about interceptors and trying to get them.
I know that I can't just put token to every request, because there's some pages and requests like /login that shouldn't have Authorization token at all. And getting html files with Authorization header is somehow giving me an exception. So I've tried to split requests like that:
angular.module('App')
.factory('sessionInjector',['$injector', function ($injector) {
var sessionInjector = {
request: function (config) {
if (config.url == "/one" || config.url == "/two"){
config.headers['Content-Type'] = 'application/json;charset=utf-8;';
config.headers['Authorization'] = localStorage.getItem('token');
} else {
config.headers['Content-Type'] = 'application/json;charset=utf-8;';
}
return config;
},
response: function(response) {
if (response.status === 401) {
var stateService = $injector.get('$state');
stateService.go('login');
}
return response || $q.when(response);
}
};
return sessionInjector;
}]);
But it doesn't work with requests like /one/{one_id} and I can't hardcode all the possibilities. So what is the best practice for this?
What you have now is a good starting point. I'm assuming the majority of your APIs will need the auth token, so setting up which endpoints don't require auth would probably be the quicker path. I haven't tested this, but it might get you on the right track. I setup your injector as a provider so you can configure the anonymous route rules within the config.
angular.module('App')
.provider('sessionInjector',[function () {
var _anonymousRouteRules;
this.$get = ['$injector', getSessionInjector];
this.setupAnonymousRouteRules = setupAnonymousRouteRules;
function getSessionInjector($injector) {
var service = {
request: requestTransform,
response: responseTransform
};
function requestTransform(config) {
if (!isAnonymousRoute(config.url)){
config.headers['Authorization'] = localStorage.getItem('token');
}
config.headers['Content-Type'] = 'application/json;charset=utf-8;';
return config;
}
function responseTransform(response) {
if (response.status === 401) {
var stateService = $injector.get('$state');
stateService.go('login');
}
return response || $q.when(response);
}
return service;
}
function isAnonymousRoute(url) {
var isAnonymous = false;
angular.forEach(_anonymousRouteRules, function(rule) {
if(rule.test(url)) {
isAnonymous = true;
}
});
return isAnonymous;
}
function setupAnonymousRouteRules(anonymousRouteRules) {
_anonymousRouteRules = anonymousRouteRules;
}
}]);
With this, you can configure the rules by passing in an array of regexes for your urls:
angular.module('App').config(['sessionInjectorProvider', config]);
function config(sessionInjectorProvider) {
sessionInjectorProvider.setupAnonymousRouteRules([
/.*\.html$/,
/^\/login$/
]);
}
There is a better way of doing this. After login in set the auth token into the header of $http service. So that you don't need to pass the config object in each call.
Login :
function Login(credentials){
$http.post(apiPath, credentials).then(function (data) {
$http.defaults.headers.common['Authorization'] = data['token'];
});
}
All the HTTP calls after this will have Authorization header set.
But there are some call which doesn't require Authorization in those cases you can write a function which have its own config object passed without Authorization in the header.
Function without Authorization:
function Without_Auth(url, data) {
var deferred = $q.defer();
var responsePromise = $http({
method: 'post',
url: url,
data: data,
headers: {
'Content-Type': 'application/json;charset=utf-8;'
}
})
responsePromise.success(function (data) {
deferred.resolve(data);
});
responsePromise.error(function (err) {
deferred.reject();
});
return deferred.promise;
}
Hope this solves your problem!
Related
I'm trying to implement SumSub, a verification tool with my SvelteKit application. All API requests require authentication in order to generate AccessTokens which are required to initiate their WebSDK on the front end of my application.
I'm following their example (https://github.com/SumSubstance/AppTokenUsageExamples/tree/master/JS) in order to generate an app token server-side which I can then bring into the client side to init the WebSDK.
In "sumsubinit.js" on server side, I have the following code:
import axios from 'axios';
import FormData from 'form-data';
import crypto from "crypto";
let accesstoken123;
let externalUserId;
let levelName;
let response;
// These parameters should be used for all requests
const SUMSUB_APP_TOKEN = "TOKEN"; // Example: sbx:uY0CgwELmgUAEyl4hNWxLngb.0WSeQeiYny4WEqmAALEAiK2qTC96fBad - Please don't forget to change when switching to production
const SUMSUB_SECRET_KEY = "KEY"; // Example: Hej2ch71kG2kTd1iIUDZFNsO5C1lh5Gq - Please don't forget to change when switching to production
const SUMSUB_BASE_URL = 'https://api.sumsub.com';
var config = {};
config.baseURL= SUMSUB_BASE_URL;
axios.interceptors.request.use(createSignature, function (error) {
return Promise.reject(error);
})
// This function creates signature for the request as described here: https://developers.sumsub.com/api-reference/#app-tokens
function createSignature(config) {
console.log('Creating a signature for the request...');
var ts = Math.floor(Date.now() / 1000);
const signature = crypto.createHmac('sha256', SUMSUB_SECRET_KEY);
signature.update(ts + config.method.toUpperCase() + config.url);
if (config.data instanceof FormData) {
signature.update(config.data.getBuffer());
} else if (config.data) {
signature.update(config.data);
}
config.headers['Access-Control-Allow-Origin'] = "*";
config.headers['X-App-Access-Ts'] = ts;
config.headers['X-App-Access-Sig'] = signature.digest('hex');
return config;
}
// These functions configure requests for specified method
// https://developers.sumsub.com/api-reference/#creating-an-applicant
function createApplicant(externalUserId, levelName) {
console.log("Creating an applicant...");
var method = 'post';
var url = '/resources/applicants?levelName=' + levelName;
var ts = Math.floor(Date.now() / 1000);
var body = {
externalUserId: externalUserId
};
var headers = {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-App-Token': SUMSUB_APP_TOKEN
};
config.method = method;
config.url = url;
config.headers = headers;
config.data = JSON.stringify(body);
return config;
}
// https://developers.sumsub.com/api-reference/#adding-an-id-document
// https://developers.sumsub.com/api-reference/#getting-applicant-status-sdk
function getApplicantStatus(applicantId) {
console.log("Getting the applicant status...");
var method = 'get';
var url = `/resources/applicants/${applicantId}/status`;
var headers = {
'Accept': 'application/json',
'X-App-Token': SUMSUB_APP_TOKEN
};
config.method = method;
config.url = url;
config.headers = headers;
config.data = null;
return config;
}
// https://developers.sumsub.com/api-reference/#access-tokens-for-sdks
function createAccessToken (externalUserId, levelName = 'basic-kyc-level', ttlInSecs = 600) {
console.log("Creating an access token for initializng SDK...");
var method = 'post';
var url = `/resources/accessTokens?userId=${externalUserId}&ttlInSecs=${ttlInSecs}&levelName=${levelName}`;
var headers = {
'Accept': 'application/json',
'X-App-Token': SUMSUB_APP_TOKEN
};
config.method = method;
config.url = url;
config.headers = headers;
config.data = null;
return config;
}
// This section contains requests to server using configuration functions
// The description of the flow can be found here: https://developers.sumsub.com/api-flow/#api-integration-phases
// Such actions are presented below:
// 1) Creating an applicant
// 2) Adding a document to the applicant
// 3) Getting applicant status
// 4) Getting access tokens for SDKs
export async function main() {
externalUserId = "random-JSToken-" + Math.random().toString(36).substr(2, 9);
levelName = 'basic-kyc-level';
console.log("External UserID: ", externalUserId);
response = await axios(createApplicant(externalUserId, levelName))
.then(function (response) {
console.log("Response:\n", response.data);
return response;
})
.catch(function (error) {
// console.log("Error:\n", error.response.data);
});
const applicantId = response.data.id;
console.log("ApplicantID: ", applicantId);
response = await axios(addDocument(applicantId))
.then(function (response) {
console.log("Response:\n", response.data);
return response;
})
.catch(function (error) {
// console.log("Error:\n", error.response.data);
});
response = await axios(getApplicantStatus(applicantId))
.then(function (response) {
console.log("Response:\n", response.data);
return response;
})
.catch(function (error) {
// console.log("Error:\n", error.response.data);
});
response = await axios(createAccessToken(externalUserId, levelName, 1200))
.then(function (response) {
console.log("Response:\n", response.data);
accesstoken123 = response.data.token;
return response;
})
.catch(function (error) {
// console.log("Error:\n", error.response.data);
});
return accesstoken123.toString();
console.log(accesstoken123);
}
main();
Which is just ripped straight from the GitHub tutorial. On my front end, I have an import of the "main" function and also run it in-app. On Server Side, it runs absolutely fine and generates the necessary token. However, in-browser it fails every single time.
I feel this might be incredibly stupid, or naive but I've been at this for several days now and I'm pulling my hair out and feel that it may be something to do with CORS, my limited understanding or even just the way I've tried to configure this for Svelte, but genuinely ANY ANY ANY help, guidance or direction at this point would be incredibly appreciated and I would be super super grateful for anything.
Controller.js
var vm = this;
vm.admin = {};
vm.add = function () {
API.addAdmin(token, vm.admin)
.then(function (resp) {
vm.hideForm = true;
vm.showButton = true;
Notify.green(resp);
}, function (resp) {
Notify.red(resp);
});
};
API.js
function addAdmin(token, dataObj) {
return Constant.getApiUrl()
.then(function (url) {
$http({
method: 'POST',
url: url + '/client/admin',
headers: {
'Token': token
},
data: dataObj
}).then(handleResp);
function handleResp(resp) {
var responseStatus = (resp.status >= 200 && resp.status < 300) ? 'good' : 'bad';
if (responseStatus === 'good') {
console.log("Success" + resp);
return resp;
} else {
console.log("Failed" + resp);
return resp;
}
}
})
}
If I get a success response in API then i need to connect it to success function in my controller and if i get error message in my API, then i need it to connect it to error function in my controller.How should I evaluate the response status from my API(is either success or error).
I don't want to pass successfn, errorfn from my controller to API(only if there's no alternative).
I need to get the response data from API to controller to show it in Notify message.
Thank You!
In service (assign response values in "originalData"):
angular.module('appname').service('myserviceName', function(yourExistingService){
this.myFunction= function(originalData) {
//for next line to work return promise from your addAdmin method.
var promise = yourExistingService.getResponseFromURL(originalData);
return promise;
}
});
And in your controller :
var promise = myserviceName.myFunction($scope.originalData);
promise.$promise.then(function() {
console.log($scope.originalData);
});
And then you can check you "originalData" and write code according to your need.For more detail you can have a look on this http://andyshora.com/promises-angularjs-explained-as-cartoon.html.
I am trying to intercept the 401 and 403 errors to refresh the user token, but I can't get it working well. All I have achieved is this interceptor:
app.config(function ($httpProvider) {
$httpProvider.interceptors.push(function ($q, $injector) {
return {
// On request success
request: function (config) {
var deferred = $q.defer();
if ((config.url.indexOf('API URL') !== -1)) {
// If any API resource call, get the token firstly
$injector.get('AuthenticationFactory').getToken().then(function (token) {
config.headers.Authorization = token;
deferred.resolve(config);
});
} else {
deferred.resolve(config);
}
return deferred.promise;
},
response: function (response) {
// Return the promise response.
return response || $q.when(response);
},
responseError: function (response) {
// Access token invalid or expired
if (response.status == 403 || response.status == 401) {
var $http = $injector.get('$http');
var deferred = $q.defer();
// Refresh token!
$injector.get('AuthenticationFactory').getToken().then(function (token) {
response.config.headers.Authorization = token;
$http(response.config).then(deferred.resolve, deferred.reject);
});
return deferred.promise;
}
return $q.reject(response);
}
}
});
});
The issue is that the responseError does an infinite loop of 'refreshes' because by Authorization header with the updated token, that is not being received by $http(response.config) call.
1.- App has an invalid token stored.
2.- App needs to do an API call
2.1 Interceptor catch the `request`.
2.2 Get the (invalid) stored token and set the Authorization header.
2.3 Interceptor does the API call with the (invalid) token setted.
3.- API respond that used token is invalid or expired (403 or 401 statuses)
3.1 Interceptor catch the `responseError`
3.2 Refresh the expired token, get a new VALID token and set it in the Authorization header.
3.3 Retry the point (2) with the valid refreshed token `$http(response.config)`
The loop is happening in point (3.3) because the Authorization header NEVER has the new refreshed valid token, it has the expired token instead. I don't know why because it supposed to be setted in the responseError
AuthenticationFactory
app.factory('AuthenticationFactory', function($rootScope, $q, $http, $location, $log, URI, SessionService) {
var deferred = $q.defer();
var cacheSession = function(tokens) {
SessionService.clear();
// Then, we set the tokens
$log.debug('Setting tokens...');
SessionService.set('authenticated', true);
SessionService.set('access_token', tokens.access_token);
SessionService.set('token_type', tokens.token_type);
SessionService.set('expires', tokens.expires);
SessionService.set('expires_in', tokens.expires_in);
SessionService.set('refresh_token', tokens.refresh_token);
SessionService.set('user_id', tokens.user_id);
return true;
};
var uncacheSession = function() {
$log.debug('Logging out. Clearing all');
SessionService.clear();
};
return {
login: function(credentials) {
var login = $http.post(URI+'/login', credentials).then(function(response) {
cacheSession(response.data);
}, function(response) {
return response;
});
return login;
},
logout: function() {
uncacheSession();
},
isLoggedIn: function() {
if(SessionService.get('authenticated')) {
return true;
}
else {
return false;
}
},
isExpired: function() {
var unix = Math.round(+new Date()/1000);
if (unix < SessionService.get('expires')) {
// not expired
return false;
}
// If not authenticated or expired
return true;
},
refreshToken: function() {
var request_params = {
grant_type: "refresh_token",
refresh_token: SessionService.get('refresh_token')
};
return $http({
method: 'POST',
url: URI+'/refresh',
data: request_params
});
},
getToken: function() {
if( ! this.isExpired()) {
deferred.resolve(SessionService.get('access_token'));
} else {
this.refreshToken().then(function(response) {
$log.debug('Token refreshed!');
if(angular.isUndefined(response.data) || angular.isUndefined(response.data.access_token))
{
$log.debug('Error while trying to refresh token!');
uncacheSession();
}
else {
SessionService.set('access_token', response.data.access_token);
SessionService.set('token_type', response.data.token_type);
SessionService.set('expires', tokens.expires);
SessionService.set('expires_in', response.data.expires_in);
deferred.resolve(response.data.access_token);
}
}, function() {
// Error
$log.debug('Error while trying to refresh token!');
uncacheSession();
});
}
return deferred.promise;
}
};
});
PLUNKER
I made a plunker & backend to try to reproduce this issue.
http://plnkr.co/edit/jaJBEohqIJayk4yVP2iN?p=preview
Your interceptor needs to keep track of whether or not it has a request for a new authentication token "in flight". If so, you need to wait on the result of the in-flight request rather than initiating a new one. You can do this by caching the promise returned by your AuthRequest and using the cached promise instead of creating a new one for every API requests.
Here is an answer to a similar question that demonstrates this.
For you example - here is an example implementation:
app.config(function ($httpProvider) {
$httpProvider.interceptors.push(function ($q, $injector) {
var inFlightRequest = null;
return {
// On request success
request: function (config) {
var deferred = $q.defer();
if ((config.url.indexOf('API URL') !== -1)) {
// If any API resource call, get the token firstly
$injector.get('AuthenticationFactory').getToken().then(function (token) {
config.headers.Authorization = token;
deferred.resolve(config);
});
} else {
deferred.resolve(config);
}
return deferred.promise;
},
response: function (response) {
// Return the promise response.
return response || $q.when(response);
},
responseError: function (response) {
// Access token invalid or expired
if (response.status == 403 || response.status == 401) {
var $http = $injector.get('$http');
var deferred = $q.defer();
// Refresh token!
if(!inFlightRequest){
inFlightRequest = $injector.get('AuthenticationFactory').refreshToken();
}
//all requests will wait on the same auth request now:
inFlightRequest.then(function (token) {
//clear the inFlightRequest so that new errors will generate a new AuthRequest.
inFlightRequest = null;
response.config.headers.Authorization = token;
$http(response.config).then(deferred.resolve, deferred.reject);
}, function(err){
//error handling omitted for brevity
});
return deferred.promise;
}
return $q.reject(response);
}
}
});
});
UPDATE:
It's not clear to me from your plunk exactly what the problem is, but there is a problem with your AuthenticationService. Recommended changes are below and here is a Plunkr that is a bit more complete (and includes tracking inflight requests):
app.factory('AuthenticationFactory', function($rootScope, $q, $http, $location, $log, URI, SessionService) {
//this deferred declaration should be moved. As it is, it's created once and re-resolved many times, which isn't how promises work. Subsequent calls to resolve essentially are noops.
//var deferred = $q.defer();
var cacheSession = function(tokens) {
SessionService.clear();
// Then, we set the tokens
$log.debug('Setting tokens...');
SessionService.set('authenticated', true);
SessionService.set('access_token', tokens.access_token);
SessionService.set('token_type', tokens.token_type);
SessionService.set('expires', tokens.expires);
SessionService.set('expires_in', tokens.expires_in);
SessionService.set('refresh_token', tokens.refresh_token);
SessionService.set('user_id', tokens.user_id);
return true;
};
var uncacheSession = function() {
$log.debug('Logging out. Clearing all');
SessionService.clear();
};
return {
login: function(credentials) {
var login = $http.post(URI+'/login', credentials).then(function(response) {
cacheSession(response.data);
}, function(response) {
return response;
});
return login;
},
logout: function() {
uncacheSession();
},
isLoggedIn: function() {
if(SessionService.get('authenticated')) {
return true;
}
else {
return false;
}
},
isExpired: function() {
var unix = Math.round(+new Date()/1000);
if (unix < SessionService.get('expires')) {
// not expired
return false;
}
// If not authenticated or expired
return true;
},
refreshToken: function() {
var request_params = {
grant_type: "refresh_token",
refresh_token: SessionService.get('refresh_token')
};
return $http({
method: 'POST',
url: URI+'/refresh',
data: request_params
});
},
getToken: function() {
//It should be moved here - a new defer should be created for each invocation of getToken();
var deferred = $q.defer();
if( ! this.isExpired()) {
deferred.resolve(SessionService.get('access_token'));
} else {
this.refreshToken().then(function(response) {
$log.debug('Token refreshed!');
if(angular.isUndefined(response.data) || angular.isUndefined(response.data.access_token))
{
$log.debug('Error while trying to refresh token!');
uncacheSession();
}
else {
SessionService.set('access_token', response.data.access_token);
SessionService.set('token_type', response.data.token_type);
SessionService.set('expires', tokens.expires);
SessionService.set('expires_in', response.data.expires_in);
deferred.resolve(response.data.access_token);
}
}, function() {
// Error
$log.debug('Error while trying to refresh token!');
uncacheSession();
});
}
return deferred.promise;
}
};
});
As a final note, keeping track of both inflight getToken requests and inflight refreshToken requests will keep you from making too many calls to your server. Under high load you might be creating way more access tokens than you need.
UPDATE 2:
Also, reviewing the code, when you get a 401 error you are calling refreshToken(). However, refreshToken does not put the new token information in the session cache, so new requests are going to continue using the old token. Updated the Plunkr.
My friend and I are building an app - my friend is on the backend (Node.js) and I'm on the front.
He implemented sessions on his end and provided me with the URL I need to call to log in. For example, a POST request
http://ourapp.heroku.com/login
with which username and password are passed.
On my side, in the Angular app, I create a login page which calls an Angular service when Login is clicked. If this service receives a 200 from the server, it does:
$cookieStore.put(cookieNames.LOGGED_IN_COOKIE, true);
$state.go('home', {}, {reload: true});
The problem is that we're having weird issues with the app on the front end. For example logging in and out often don't work. Also, users are able to go to pages even after they log out. I figured out (at least I think) that I'm not properly storing the Cookie I receive from the server, I'm only storing my own.
This whole Angular thing is still weird to me, because in PHP or Python apps you get a page request from the client and verify if he's logged in before sending him the page he requested. In Angular it's different - the user has all of the pages already. So how do I limit what he can see without logging in and how to I properly keep track of the server's cookie?
If you use ui-router, you can do something similar to this:
First introduce some kind of access-levels to your states
$stateProvider
.state('admin', {
url: "/admin",
templateUrl: "/app/views/admin.html",
controller: "AdminController",
data: {
accessLevel: 'admin'
}
})
then you have to check on state change, if your logged in user has the required access-level:
You can create an auth service which implements your logic to log your user in, as example you can use this service
angular.module('app')
.factory("AuthService", ["$rootScope", "$http", "AuthSession", "AuthHttpBuffer", "AUTH_EVENTS", function ($rootScope, $http, AuthSession, AuthHttpBuffer, AUTH_EVENTS) {
function loginFailed() {
$rootScope.$broadcast("auth-change", AUTH_EVENTS.loginFailed);
};
AuthSession.load();
$rootScope.$on('$stateChangeStart', function (event, nextState) {
if (nextState.data && nextState.data.accessLevel && !service.isAuthorized(nextState.data.accessLevel)) {
event.preventDefault();
$rootScope.$broadcast('auth-change', AUTH_EVENTS.loginRequired, nextState.name);
}
});
var service = {
login: function (credentials) {
return $http
.post('/api/account/login', credentials)
.success(function (data, status) {
if ((status < 200 || status >= 300) && data.length >= 1) {
loginFailed();
return;
}
AuthSession.create(data.AccessToken, data.User);
$rootScope.$broadcast("auth-change", AUTH_EVENTS.loginSuccess);
AuthHttpBuffer.retryAll();
}).error(function (data, status) {
loginFailed();
});
},
cancel: function () {
AuthHttpBuffer.rejectAll();
},
logout: function () {
AuthSession.destroy();
$rootScope.$broadcast("auth-change", AUTH_EVENTS.logoutSuccess);
},
isAuthenticated: function () {
return (AuthSession.token !== null);
},
isAuthorized: function (accessLevel) {
if (!accessLevel) return true;
return (this.isAuthenticated() && AuthSession.user.UserRoles.indexOf(accessLevel) !== -1);
}
}
return service;
}]);
and your AuthSession service:
angular.module('app')
.factory("AuthSession", ["$rootScope", "$window", "AUTH_EVENTS", function ($rootScope, $window, AUTH_EVENTS) {
var sessionService = {
user: null,
token: null,
//load the stored session data
load: function () {
var user = ...yourdata... //TODO implement load user data;
var token = ...yourdata... //implement load user data;
if (!user || !token) return;
if (!this.checkTokenExpiration(token)) return;
this.user = user;
this.token = token;
$rootScope.$broadcast("auth-change", AUTH_EVENTS.loginSuccess);
},
//save the current data to the session storage
save: function () {
//TODO save your userdata/token etc.
},
//create the current user with the assosiated token
create: function (token, user) {
this.token = token;
this.user = user;
if (!angular.isArray(this.user.UserRoles))
this.user.UserRoles = [this.user.UserRoles];
this.save();
},
//destroy an user with all assosiated data
destroy: function () {
this.token = null;
this.user = null;
//TODO clear your saved data here
},
//check if the supplied access token data is expired
checkTokenExpiration: function (token) {
if (token === undefined || token === null) return false;
var retval = (new Date(token.TokenExpires).getTime() > new Date().getTime());
if (retval === false) {
sessionService.destroy();
$rootScope.$broadcast("auth-change", AUTH_EVENTS.sessionTimeout);
}
return retval;
}
}
return sessionService;
}]);
and the constants:
angular.module('app')
.constant('AUTH_EVENTS', {
loginSuccess: 'auth-login-success',
loginFailed: 'auth-login-failed',
logoutSuccess: 'auth-logout-success',
loginRequired: 'auth-login-required',
sessionTimeout: 'auth-session-timeout',
notAuthorized: 'auth-not-authorized'
});
If you want be able to catch urls, where you haven't the right accesrights, you can send the request to a http buffer:
angular.module('app')
.factory('AuthHttpBuffer', ["$injector", function ($injector) {
/** Holds all the requests, so they can be re-requested in future. */
var buffer = [];
/** Service initialized later because of circular dependency problem. */
var $http;
function retryHttpRequest(config, deferred) {
function successCallback(response) {
deferred.resolve(response);
}
function errorCallback(response) {
deferred.reject(response);
}
$http = $http || $injector.get('$http');
$http(config).then(successCallback, errorCallback);
}
return {
/**
* Appends HTTP request configuration object with deferred response attached to buffer.
*/
append: function (config, deferred) {
buffer.push({
config: config,
deferred: deferred
});
},
/**
* Abandon or reject (if reason provided) all the buffered requests.
*/
rejectAll: function (reason) {
if (reason) {
for (var i = 0; i < buffer.length; ++i) {
buffer[i].deferred.reject(reason);
}
}
buffer = [];
},
/**
* Retries all the buffered requests clears the buffer.
*/
retryAll: function () {
for (var i = 0; i < buffer.length; ++i) {
retryHttpRequest(buffer[i].config, buffer[i].deferred);
}
buffer = [];
}
};
}]);
and if you haven't enough you can also add an interceptor, that triggers an auth change event, if the server response is unauthorized:
angular.module('app')
.factory('AuthInterceptor', ["$rootScope", "$q", "AuthSession", "AuthHttpBuffer", "AUTH_EVENTS", function ($rootScope, $q, AuthSession, AuthHttpBuffer, AUTH_EVENTS) {
return {
request: function (config) {
config.headers = config.headers || {};
if (AuthSession.token) {
config.headers.Authorization = 'Bearer ' + AuthSession.token.TokenKey;
}
return config;
},
responseError: function (rejection) {
if (rejection.status === 401) {
var deferred = $q.defer();
AuthHttpBuffer.append(rejection.config, deferred);
if (AuthSession.token) {
$rootScope.$broadcast('auth-change', AUTH_EVENTS.notAuthorized);
} else {
$rootScope.$broadcast('auth-change', AUTH_EVENTS.loginRequired);
}
return deferred.promise;
}
return $q.reject(rejection);
}
}
}]);
this interceptor also adds a session token to all requests if available.
to use this interceptor, you have to add the following two lines to your app.config():
$httpProvider.defaults.withCredentials = true;
$httpProvider.interceptors.push("AuthInterceptor");
Below is my interceptor which handles global errors. But I want to bypass some http requests. Any suggestions ?
var interceptor = ['$rootScope', '$q',function (scope, $q) {
function success(response) {
return response;
}
function error(response) {
var status = response.status;
if (status == 401) {
window.location = "./index.html#/404";
return;
}
if (status == 0) {
window.location = "./index.html#/nointernet";
}
return $q.reject(response);
}
return function (promise) {
return promise.then(success, error);
}
}];
$httpProvider.responseInterceptors.push(interceptor);
I was able to implement this functionality simply by adding a property to the config object of the $http request. ie. ignore401. Then, in my interceptor, in the response error handler, check for the property on the config object, and if it is present, do not forward to login or whatever else you do on a 401 response.
First, the interceptor:
$provide.factory('authorization', function() {
return {
...
responseError: (rejection) => {
if (rejection.status === 401 && !rejection.config.ignore401) {
// redirect to login
}
return $q.reject(rejection);
}
};
});
Then, for any request that I want to bypass the 401 error handler:
$http({
method: 'GET',
url: '/example/request/to/ignore/401error',
ignore401: true
});
Hope that helps.
I'm solving this as follows:
$httpProvider.interceptors.push(function($rootScope) {
return {
request: function(config) {
var hideUrl = "benefit/getall"; // don't show the loading indicator for this request
var hide = (config.url.indexOf(hideUrl)); // is this isn't -1, it means we should hide the request from the loading indicator
if(hide == -1)
{
$rootScope.$broadcast('loading:show')
}
return config
},
response: function(response) {
$rootScope.$broadcast('loading:hide')
return response
}
}
});
Doesn't the response object contain an "options" property where you can inspect what URL was used in the request?