Redirecting in AngularJS using UI router and a token

there are lot of tutorials on the net for angular and jwt

I used those to develop something along the lines you want. They key part of the code is in the config

$httpProvider.interceptors.push(function($q, $location, $localStorage, $injector) {
    return {
        'request': function (config) {
            config.headers = config.headers || {};
            if ($localStorage.token) {
                config.headers.Authorization = 'Bearer ' + $localStorage.token;
            }
            return config;
        },
        'responseError': function(response) {
            /* 401, unauthorised:
                - bad username / password
                - token expired
               403, forbidden - notAdmin
            */ 
            // if(response.status === 401 || response.status === 403) {
            if(response.status === 401) {
                console.log("app.js: httpInterceptor caught 40x:", response);
                $injector.get('$state').go('login');
            }
            // Replace reponse with rejected promise to prevent rest of execution
            return $q.reject(response);
        }
    };

Probably really late (because Angular2's out however I'm still answering if there are people still using 1.x) but I've worked on my own time with Node sending JWTs and Angular using it and I did it with UI router. Simon's solution will work however, I try not to touch the rootScope.

I implement 3 stuff to get it working. An Authorization service, the ngStorage module and Ui Router's state's resolve property.

ngStorage

It's a module that exposes $localStorage and $sessionStorage. You can add any object to it and it will set it in the browser until you clear it.

UI Router state's resolve

The offical docs of 1.x states that resolve is a property which maps to a function and will fire before the state is even initialized. Hence, this is a place where you can do micro configurations which the state is dependent on and it also does good with promises.

Authorization Factory

This is a factory which has 3 services. Login, Logout and isAuthenticated. The login service sets the token in the $localStorage upon success. In it's dependency injection, I inject it with ngStorage's $localStorage service alongwith $http and the others.

And now I explain how I do it.

I always point my default state to my home state instead of login state.

Instead of using rootscope, I make the Authorization Factory's login service post to the login endpoint of the server (the end point which will give me a fresh token). Once I receive the token, I set it to the $localStorage as my token.

Then, on resolve of my home state, I call the Authorization Factory's isAuthenticated service which simply checks if the token is set in the $localStorage. If it is not, it returns false. If it returns false, I can transition the home state redirect to my login state by $state.go('login');

What I get by this is, in every $http call application wide, I can inject the Authorization's isAuthenticated service in the controller and have it check for the token (which login service got and which isAuthenticated also has access to because they are in the same factory). If the token is present, I extract that token and send it with my data to the server. Then, my server can do additional token validation like checking it's expiry time and stuff and response back with 401s or 200s.

Now this may sound infuriating and seems like it's not DRY. But I'd like to say that I do all of this in one root parent state and attach all other states as the child states. The parent is abstract and hence can do the resolve and there is no need to initialize the state. The home can be the default non-abstract state.

I try to stay away from rootScopes and $watches and stuff and I keep them as a last resort always. Cheers!