0

I implemented JWT on my angular js application . I added the jwt authorization keys with all the http function . My codes are :

angular.module('IttadishopServices', [])
    .config(function Config($httpProvider, jwtInterceptorProvider) {
        jwtInterceptorProvider.tokenGetter = function (User) {
            var jwt = localStorage.getItem('id_token');
            if (localStorage.getItem("id_token") === null) {
                User.generateToken().success(function (data) {
                    localStorage.setItem('id_token', data);
                    return data;
                });

            } else {
                return jwt;
            }
        }
        $httpProvider.interceptors.push('jwtInterceptor');

    });

Now Problem is , the authorization key is added on the header . but each request is send double to the server . I tried to add that authorization key many ways , but every time each request is sending double to the server , one request with the authorization key and another without any authorization key . Added an screenshot of console .

Console image for duplicate request

Mohsin
  • 1
  • 2

1 Answers1

0

The problem is that you are not returning a promise in your intercepter and you are using a asynchronous function in that interceptor. So wrapping the asynch function in $q and returning a promise should fix the issue of 2 times sending the request. One time not waiting on the async function to complete (no key) and once when the promise of the User.generateToken() is resolved. Wrapping:

angular.module('IttadishopServices', [])
    .config(function Config($httpProvider, jwtInterceptorProvider) {
        jwtInterceptorProvider.tokenGetter = function (User) {
            var jwt = localStorage.getItem('id_token');
            if (localStorage.getItem("id_token") === null) {
                var deferred = $q.defer();
                User.generateToken().success(function (data) {
                    localStorage.setItem('id_token', data);
                    deferred.resolve(data);
                });
                return deferred.promise;
            } else {
                return jwt;
            }
        }
        $httpProvider.interceptors.push('jwtInterceptor');
    });

But you shouldn't define that function in the config block, rather in a factory.

Source: http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/

Kenneth Van den Berghe
  • 255
  • 2
  • 15
  • it's okay . I tried to use all the possible method here to solve it . but , the extra request is occurring with "option" method . so, why the options method request is occurring here . i am adding the request header here. Request URL:http://api.ittadishop.local/ittadi/checkUserSession/ Request Method:OPTIONS Status Code:200 OK Remote Address:192.168.44.44:80 – Mohsin May 06 '16 at 17:21
  • That OPTIONS request is a preflight request. See more info here: http://stackoverflow.com/questions/1256593/why-am-i-getting-an-options-request-instead-of-a-get-request – Kenneth Van den Berghe May 07 '16 at 19:32