My authentication token interceptor does not intercept request/response of fresh route

Question

I am trying to implement jwt authentication for my nodejs, express and angularjs app. So far I have generated the token, and stored it in my localStorage. According to this tutorial, I have implemented the authInterceptor in angular factory as follows:

app.factory('authInterceptor', function ($rootScope, $q, $window) {
  return {
    request: function (config) {
      config.headers = config.headers || {};
      if ($window.localStorage.myToken) {
        config.headers.Authorization = 'Bearer ' + $window.localStorage.myToken;

      }
      return config;
    },
    response: function (response) {
      if (response.status === "401") {
        $window.location.replace('/dash');
      }
      return response || $q.when(response);
    }
  };
});

I have pushed the interceptor in config file as follows:

$httpProvider.interceptors.push('authInterceptor');

So far I have sent the credentials to server, generated the token and stored it in localStorage.

So as long as I have not deleted the token from localStorage, and the token has not expired, I think it is supposed to persist. If I make requests from within the loaded page using the background ajax call of angularjs, the authentication header is set as it is supposed to.

Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjoiYSIsInR5cGUiOiJzYWxlcyIsImlhdCI6MTQyMjI2MDExMCwiZXhwIjoxNDIyMjc4MTEwfQ.Iv6W-Tc8Qm4FGclzmgbtjvWFz_tyDwEvrFmMmucONpY

However neither my request nor my response is intercepted when I navigate to a new route. For eg, I have my '/sales' route. But when I navigate to sales route from address bar, neither the request authentication header is set by the interceptor, thus returning authorization error 401 from server, which is not intercepted either; hence not redirecting to /dash.

Here is link of the error, and the headers of GET request to unauthorized route '/sales': request and response header at 401 error

`NetworkError: 401 Unauthorized - http://localhost:9090/sales` — Pravin, Jan 26 '15 at 08:52
My apologies, I should have been clearer. In the sense of: responseError: function(rejection) { if(rejection.status == 401){ //do something with path } } — Blackunknown, Jan 26 '15 at 09:58
is this supposed to go inside interceptor or inside the controller? — Pravin, Jan 26 '15 at 10:19
It is part of the interceptor just like the response and request are. I use responseError to detect if my status was a 401 and then redirect the user to a login page in my case. — Blackunknown, Jan 26 '15 at 11:00
nope. somehow, the interceptor is not intercepting the request or the response. I dont knw why. — Pravin, Jan 26 '15 at 12:19

score 2 · Answer 1 · edited May 23 '17 at 12:01

2

Is your backend sending the WWW-Authenticate header along with the 401 status? If so, and it contains Basic, the browser will catch the response and show the credentials popup before Angular could catch it.

Try either removing or altering it.

References:

edited May 23 '17 at 12:01

Community

1
1

answered Feb 03 '15 at 20:21

vzsg

2,831
17
20

thank you... it sure does makes sense... but trying to implement it... u gave me atleast some head start... – Pravin Feb 03 '15 at 20:42
i could not fine the www-authenticate header. I am using [jsonwebtoken](https://github.com/auth0/node-jsonwebtoken) to create token, [express-jwt](https://github.com/auth0/express-jwt) to intercept the authorization header at server and as described, angular Interceptor to intercept the response at client side. – Pravin Feb 03 '15 at 22:24

Pravin · Accepted Answer · 2015-07-03T04:47:59.523

What I have understood so far is, normally before javascript frontend frameworks how the http request were served was:

We type a url in address bar.
The browser sends the request.
The server gets the request.
serves the necessary html, js and css files.
browser renders it.

But as the recent shift to various javascript frontend frameworks and use of RESTful api.s has begun, the request needs to have authorization header. Thus in many of the single page web apps with javascript frameworks like angularjs,

the initial request for '/' router is sent
the server serves the web application to the browser
all the further routing in the web application is done within the front end application, hence the "#" after the url.
Requests are made by the application to fetch, update, delete or post from the application through angular js.

So when a request is made from angular application, it is intercepted from angular application and intercepted by your interceptor. However when a url is entered from the address bar, the browser sends request directly to server, because at that point of the request, the browser has not loaded the angular web application.

What I did was you set html5mode to false and put a # before your route.

like localhost/#/some-route and do the routing from your route provider. When there is # before your route, the request for / goes to server, the application loads, and then the request is sent through the application. Now from this some-route, make some controller make request to the desired server endpoint, which will be intercepted by interceptor.

I seem to be having an problem very similar to this http://stackoverflow.com/questions/36481206/using-passport-for-authentication-of-api-endpoints — gh0st, Apr 07 '16 at 22:48

My authentication token interceptor does not intercept request/response of fresh route

2 Answers2