11/20/13

AngularJS intercept API error responses | blog post

This webpage is not available

The connection to googleads.g.doubleclick.net was interrupted. Here are some suggestions:

blog (../../) post

AngularJS intercept API error responses

Written by Bram Neijt on August 22, 2013.
When you work with a security filter on the server end of your AngularJS (http://angularjs.org/) application, your session may time out resulting in a 401 Unauthorized (http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html) response. The simplest thing to do is just have the Javascript application reload the page. The filter on the server side can then choose to redirect to a login page. AngularJS has created intercepters (http://docs.angularjs.org/api/ng.$http) to allow you to have a single place where you cut into all the error responses from the server (HTTP status codes 300 and up). First some application code that will seem familiar when you have written an AngularJS application:
v a rA p p=a n g u l a r . m o d u l e ( ' m y a p p ' ,[ ' u i ' ] ) ; A p p . c o n t r o l l e r ( ' m y C o n t r o l l e r ' ,f u n c t i o n( $ s c o p e ,$ h t t p ,$ t i m e o u t ){ $ s c o p e . d a t a=[ ] ; f u n c t i o nu p d a t e ( ){ $ h t t p . g e t ( " a p i / d a t a . j s o n " ) . s u c c e s s ( f u n c t i o np u t D a t a I n S c o p e ( d a t a ){ $ s c o p e . d a t a=d a t a ; $ t i m e o u t ( u p d a t e ,2 0 0 0 ) ; } ) . e r r o r ( f u n c t i o nt r y A g a i n L a t e r ( ){ $ t i m e o u t ( u p d a t e ,2 0 0 0 ) ; } ) ; } u p d a t e ( ) ; }

The above code will call G E Ton a p i / d a t a . j s o napproximately every two seconds. Now we set up an interceptor by calling c o n f i gon the A p pand adding the interceptor to the injected $ h t t p P r o v i d e r :
A p p . c o n f i g ( [ ' $ h t t p P r o v i d e r ' ,f u n c t i o n( $ h t t p P r o v i d e r ){ $ h t t p P r o v i d e r . i n t e r c e p t o r s . p u s h ( f u n c t i o n( $ q ){ r e t u r n{ ' r e s p o n s e ' :f u n c t i o n( r e s p o n s e ){ / / W i l lo n l yb ec a l l e df o rH T T Pu pt o3 0 0 c o n s o l e . l o g ( r e s p o n s e ) ; r e t u r nr e s p o n s e ; } , ' r e s p o n s e E r r o r ' :f u n c t i o n( r e j e c t i o n ){ i f ( r e j e c t i o n . s t a t u s= = =4 0 1 ){ l o c a t i o n . r e l o a d ( ) ; } r e t u r n$ q . r e j e c t ( r e j e c t i o n ) ; } } ; } ) ; } ] ) ;

bneijt.nl/blog/post/angularjs-intercept-api-error-responses/

1/2

11/20/13

AngularJS intercept API error responses | blog post

The r e s p o n s eproperty of the returned object is just there for testing purposes. As it will only receive responses that fall below status code 300, there is no use for it when we want to catch 401. Another thing to note is the r e s p o n s e E r r o rhandler does not stop the program flow after the
l o c a t i o n . r e l o a d ( ) . As the application I wrote does not have state to save a simple destroy the

application by refresh is enough here. Lastly: the code is for the new interceptors approach, not the deprecated code which uses the
r e s p o n s e I n t e r c e p t o r sproperty of the $ h t t p P r o v i d e r . Ive gotten this code to work with version

version 1.2.0rc1 of AngularJS.

Powered by hakyll (http://jaspervdj.be/hakyll/). Copyright bneijt (/). Share Google+ (https://plus.google.com/share? url=http://bneijt.nl/blog/post/angularjs-intercept-api-errorresponses/index.html), Twitter (https://twitter.com/intent/tweet? url=http://bneijt.nl/blog/post/angularjs-intercept-api-errorresponses/index.html), Facebook (https://www.facebook.com/sharer.php? u=http://bneijt.nl/blog/post/angularjs-intercept-api-errorresponses/index.html), Instapaper (http://www.instapaper.com/hello2? url=http://bneijt.nl/blog/post/angularjs-intercept-api-errorresponses/index.html), Pinterest (http://www.pinterest.com/pin/create/button/? url=http://bneijt.nl/blog/post/angularjs-intercept-api-errorresponses/index.html), Slashdot (http://slashdot.org/submit.pl? url=http://bneijt.nl/blog/post/angularjs-intercept-api-errorresponses/index.html) 0 comments

Sign in

5 people listening

(http://livefyre.com)

+ Follow Newest | Oldest

Post comment as...

bneijt.nl/blog/post/angularjs-intercept-api-error-responses/

2/2