Error with angular intercerptors

Asked

Viewed 190 times

0

I’m trying to implement an authentication system with Angular + json web token, but when I try to make one $http.interceptors.push('nomeDo Interceptor') error in application and browser console shows no error.

Follow some parts of the code.

The Interceptor

angular.module('digApp').factory('authInterceptor', function(){
  return {
    request: function(config){
      console.log(config);
      return config;
    }
  }
});

A Config do Interceptor

angular.module('digApp').config(function($httpProvider){
  $httpProvider.interceptors.push("authInterceptor");
});

for now I’m only displaying what comes from config, but it’s not working, the application locks the requests http that makes the api. And it doesn’t show the console log.(), and neither loads the views of ng-view;

If someone has a good tutorial of Angular login system + jwt + nodejs I am grateful.

  • What error appears in the log? You can put it here?

  • So this is the problem in the browser console does not display anything, no error. It does not throw any error exception dai nor know how to debug it.

  • But then what error does appear? Or why do you think it doesn’t work?

  • It does not work because the angler does not make the http requests, nor loads the views, if I remove $http.interceptors.push(), it loads the views normally again.

1 answer

0


Apparently everything is OK! Try to replace the Interceptor code with this

Interceptor.js

(function() {
    'use strict';

    angular
        .module('digApp')
        .factory('authInterceptor', authInterceptor);

    authInterceptor.$inject = ['$q'];

    function authInterceptor($q) {
        return {
            request: request,
            response: response,
            requestError: requestError,
            responseError: responseError
        };

        function request(config) {
            var url = config.url;
            return config;
        }

        function response(response) {
            var url = response.config.url;
            return response;
        }

        function requestError(rejection) {
            return $q.reject(rejection);
        }

        function responseError(rejection) {
            return $q.reject(rejection);
        }
    }
})();
  • This solved the issue that didn’t show the console.log(), but if I inject $q in addition, the exact type of $http, and the $localstorage comes back to hang.But I’ll look here to see where I’m missing.

  • I think I’m doing wrong I’m trying to do so.

  • I think I’m doing wrong I’m trying to do like this: function request(config) {
 var url = config.url;
 $http.defaults.headers.common.Authorization = 'JWT' + store.get('id_token');
 return config;
 }

  • Got it! You won’t be able to modify the header that way. Remove the $http injected into the Interceptor and try to add this Authorization to the header as follows: - config.headers['Authorization'] = 'JWT';

  • So I put it like this: function request(config) {
 var url = config.url;
 config.headers['Authorization'] = 'JWT '+ store.get('id_token');
 return config;
 } I think there’s something wrong with the api as well. I put it in git if you want to give it a look. https://github.com/asxpyre/piz.git

  • I think the problem is this store, removes it from $inject and in headers leaves only JWT for now. Just for testing

  • Even though I leave only jwt, it doesn’t work, returns 401. :(

  • I think I already know what the problem is, you have to validate if it is an external URL to apply the modification in Reader: var isRequest = false;
 if (url.indexOf('?') > -1) url = url.substring(0, url.indexOf('?'));
 if (url.lastIndexOf('http', 0) === 0) isRequest = true;
 if(isRequest){
 config.headers['Authorization'] = 'JWT '+ store.get('id_token');
 }
 return config;

  • Now the error has changed to angular.min.js:118 Error: [$compile:tpload]

Show 5 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.