How to Inject Angular Interceptor

Question

I realize there are quite a few posts on interceptors but I am still having a hard time getting mine to work. My angular knowledge is so so when it comes to understanding how different things should be injected, where, etc. I believe the code is correct but i am not really sure how to get it injected into my application.

I believe the main issue resides in how i am using angular.module('devtestApp') in the interceptor file. I have tried moving $httpProvider.interceptors.push('JwtAuthInterceptor') to different locations but either nothing happens, ie the interceptor is not used, or, i get the following error when i have $httpProvider.interceptors.push('JwtAuthInterceptor') uncommented in the main app file.

jquery.js:3869 Uncaught Error: [$injector:unpr] Unknown provider: JwtAuthInterceptorProvider <- JwtAuthInterceptor <- $http <- $templateRequest <- $route

INTERCEPTOR FILE:

 angular.module('devtestApp') .factory('JwtAuthInterceptor', function ($localStorage, $q, $location) { return { request: function(config) { console.log('in the interceptor'); config.headers.Authorization = 'Bearer '; config.headers = config.headers || {}; if ($localStorage.getItem('token')) { // may also use sessionStorage config.headers.Authorization = 'Bearer ' + $localStorage.getItem('token'); } return config || $q.when(config); }, response: function(response) { if (response.status === 401) { // Redirect user to login page / signup Page. $location.path('/login'); } return response || $q.when(response); } }; }); // Register the previously created JwtAuthInterceptor. angular .module('devtestApp').config(function ($httpProvider) { $httpProvider.interceptors.push('JwtAuthInterceptor'); });

MAIN APP FILE:

 angular .module('devtestApp', [ 'ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch', 'angularSpinner', 'ngStorage' ]) .config(function ($routeProvider, $locationProvider, $httpProvider, $qProvider) { $routeProvider .when('/', { templateUrl: '/app/views/main.html', controller: 'MainCtrl', controllerAs: 'main' }) ..... more of these // $httpProvider.interceptors.push('JwtAuthInterceptor'); $locationProvider.html5Mode(false); $locationProvider.hashPrefix("!"); });

Headers logged server side(node):

 { host: 'localhost:8081', connection: 'keep-alive', pragma: 'no-cache', 'cache-control': 'no-cache', accept: 'application/json, text/plain, */*', 'user-agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36', referer: 'http://localhost:8081/', 'accept-encoding': 'gzip, deflate, sdch, br', 'accept-language': 'en-US,en;q=0.8', cookie: 'SQLiteManager_currentLangue=2;

connect.sid=s%3AS4dpz1_ZhfwHFfVl9qBWnVKom8D4mgHh.04Kb%2B%2BsferIBZNavKQjRRoOvDwhFY7NjTjcabldEbio; JSESSIONID=d28168fff4793599a8c24f2f037c; treeForm_tree-hi=treeForm:tree:applications', dnt: '1' }

Sorry the headers aren't formatted well, but that is them in their entirety. Thanks for any help you can provide, if you need anymore information please let me know!

seems that your interceptor and push is well defined. Can you please add an http call + request header of that call to see if interceptor is not called as you hsall have : config.headers.Authorization = 'Bearer '; — aorfevre
– aorfevre, Commented Jun 8, 2017 at 14:39
I'm not sure if this has any bearing on the behavior you're seeing, but you should be able to eliminate the left hand side of your return statements and just always return the $q.when wrapped config or response. — Mike Feltman
– Mike Feltman, Commented Jun 8, 2017 at 14:43
@aorfevre I updated the post with the headers shown from server side. They are not there :(. Do i have to manually add anything to my service file(where all the http.get/post/put's are being called from)? — reedb89
– reedb89, Commented Jun 8, 2017 at 14:51
No; this is the goal of the interceptor to perform those automatic actions ;) therefore; you shall not add a specific parameter / setup on your $http call while using an interceptor — aorfevre
– aorfevre, Commented Jun 8, 2017 at 14:53
@aorfevre Do you think the error lies within how i am calling angular .module('devtestApp') in the interceptor file? Is there another way that i should be handling this in that file? — reedb89
– reedb89, Commented Jun 8, 2017 at 15:09

georgeawg · Accepted Answer · 2017-06-08 19:05:40Z

Can you try the following ?? ? This is the structure that I use for my project.

Creating your own module

angular.module('myInterceptorModule') .factory('JwtAuthInterceptor', function ($localStorage, $q, $location) { return { request: function(config) { console.log('in the interceptor'); config.headers.Authorization = 'Bearer '; config.headers = config.headers || {}; if ($localStorage.getItem('token')) { // may also use sessionStorage config.headers.Authorization = 'Bearer ' + $localStorage.getItem('token'); } return config || $q.when(config); }, response: function(response) { if (response.status === 401) { // Redirect user to login page / signup Page. $location.path('/login'); } return response || $q.when(response); } }; }) // Register the previously created JwtAuthInterceptor. // I have removed the declaration of the module again; it is unecessary .config(function ($httpProvider) { $httpProvider.interceptors.push('JwtAuthInterceptor'); });

MAIN APP FILE; add your new module

 angular .module('devtestApp', [ 'ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch', 'angularSpinner', 'ngStorage', 'myInterceptorModule' ]) .config(function ($routeProvider, $locationProvider, $httpProvider, $qProvider) { $routeProvider .when('/', { templateUrl: '/app/views/main.html', controller: 'MainCtrl', controllerAs: 'main' }) ..... more of these // $httpProvider.interceptors.push('JwtAuthInterceptor'); $locationProvider.html5Mode(false); $locationProvider.hashPrefix("!"); });

This did the trick! Thanks so much for the help, much appreciated.

Collectives™ on Stack Overflow

How to Inject Angular Interceptor

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related