9

I'm creating an AngularJS application that uses the JWT token for authentication. The token is being passed using the AngularJS interceptor as shown below.

'request': function(config)
        {
            if (store.get('jwt_token') != null)
            {
                config.headers['x-access-token'] = store.get('jwt_token');
            }
            else
            {
                config.headers['x-access-token'] = '';
            }

            return config;
        }

Whenever I'm accessing any /restricted pages, everything is working fine. The issue is when I'm going to the /restricted page by directly typing the URL in the address bar (or refreshing the page), the AngularJS gets circumvented, and hence, the Interceptors don't intercept the request, and the token is not passed.

I've been searching for a while, I found some solutions like responding with a piece of code that loads the AngularJS then makes a redirect from there. However, I'm looking for a simpler/neater approach if possible as I might be missing something here.

I can detect if the request came from AngularJS or not by checking for the x-access-token since I'm always passing it (empty value if user is not authenticated).

Solution

Alex's answer is pointing to the exact problem, thanks Alex.

I finally figured it out yesterday. The solution I went with was to make sure all the requests come from AngularJS, I have a list of the restricted pages, if any of them is requested, I'm calling a function to verify and validate the JWT token on server side, if it's valid, proceed, otherwise, go to login page. The key thing is to ensure that ALL requests should go to the index.html to make sure AngularJS is handling the routing.

This link helped me greatly to solve this issue.

http://arthur.gonigberg.com/2013/06/29/angularjs-role-based-auth/

6
  • I feel that the request is not being intercepted before sending it to the server. Try adding: $http.defaults.headers.common.x-access-token = store.get('jwt_token'); in your app.js. Commented Jun 28, 2015 at 21:10
  • Can you also add how you angular sending to the restricted page. I wonder if it waits for a 401 or just simply redirects. Commented Jun 28, 2015 at 21:57
  • What is that store? If it is some cookie service, than all is fine, because cookies are sent with request headers. If it is some localStorage etc, then what suggets @RahatMahbub should be enough .. Commented Jun 29, 2015 at 11:09
  • angular does intercept an api call. intercepting/non-intercepting your request should actually have nothing to do with if user types the address directly, or the routing happens thru router. ngRouter & ngResource are two totally different things. The problem might be the way you are registering the interceptor, mostly your interceptor is not getting registered when user directly enters the url
    – algos
    Commented Jun 29, 2015 at 11:47
  • 2
    Im not really sure but couldnt you just watch a Statechange, and if the toState is restricted you could redirect or do whatever you want? So if the state is valid and the token then you can pass else you redirect to login for example or error page
    – stackg91
    Commented Jun 29, 2015 at 14:19

4 Answers 4

3
+100

It sounds as if there's a confusion between Angular's router and server endpoints.

You are presumably triggering the $http configuration while navigating through the application, using URL's tracked by Angular's router (which works fine), whereas the /restricted URLs are server URLs.

Therefore, when you ask for anything /restricted outside of the Angular app (in the browser), it is sending the request straight to the server, and not via the Angular router or application.

Basically, you need to create routes in your Angular app that are within the restricted context, that when initialized, run the $http configuration. You should never be calling server end-points directly in the address bar, except for index.html (/).

I'd suggest having an Angular route called /restricted-area so that when a user hits it, it will always use the $http methods you have, by being a dedicated Angular route, calling the server's /restricted endpoint internally, via a controller.

1
  • That's the issue that I was going through, I finally figured it out yesterday. The solution I went with was to make sure all the requests come from AngularJS, I have a list of the restricted pages, if any of them is requested, I'm calling a function to verify and validate the JWT token on server side, if it's valid, proceed, otherwise, go to login page. Thanks. Commented Jul 3, 2015 at 4:01
2

I had asked the similar question 2 months ago. What I have understood 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 your browser
  • all the further routing in the web application is done within your front end application, hence the "#" after your url.
  • Requests are made by the application to fetch, update, delete or post from your application through angular js.

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

What I suggest is you set html5mode to false and put a # before your route.

like localhost/#/restricted and do the routing from your route provider. When there is # before your route, the request for / goes to server, your application loads, and make some controller in /restricted from your application make http request to desired server end point. In this way the request is sent through your application and will be intercepted by your interceptor. The refresh and directly typing the address in address bar works as well.

0
0

I assume if you access the page /restricted your Angular app will start up correctly and it is just a login problem.

If you don't have a token then you have to redirect to the login page. You could show the login as a modal overlay then you don't have to switch the page. The interceptor will monitor the response result for status 401. In that case the interceptor will show the login. After the successful login the interceptor will execute the origin request - with the token.

You can find a working example in the angular app

-2

just pass this token in cookies, not in header.

3
  • 1
    There are good reasons to use header tokens instead of cookies, such as better cross domain compatibility
    – gaiazov
    Commented Jun 30, 2015 at 1:48
  • But there is simply no way to force client to add header if he just makes http request. Also cookies can be protected from javascript, where headers cant as far as I know. Commented Jun 30, 2015 at 10:28
  • @PetrAveryanov Here's some literature on cookies vs jwt and why jwt is passed in the header: auth0.com/blog/2014/01/07/… Commented Jun 30, 2015 at 22:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.