Custom AngularJS $http interceptor case

The beauty of JWT is that they are essentially just javascript objects. You could for instance provide the user a token containing their role in the system (user, admin, support etc...) and show/hide elements accordingly. So basically not only you grant the user access to the API, you also provide them with their type of access. Of course you should NEVER rely on client side authentication to allow restricted API's directly (verify the token on each request, check for the provided role on the server).

Here's an example in NodeJS and Angular:

//In NodeJS...
app.get('/path/to/secured/api', verifyTokenOr401, function(req, res) {
//Do stuff...
res.json({msg: 'Success');
});

function verifyTokenOr401(req, res, next) {
 var authHeader = req.headers.authorization;
 try {
  var token = authHeader.split(' ')[1];
  if(jwt.verify(token, 'myAppSecret'))
   next();
 } catch(e) {
  res.status(401).send('Not authorized');
 }
}

//Assuming you use node-jsonwebtoken package
app.post('/path/to/authentication', function (req, res) {
//Verify authentication...

 User.findOne({username: req.body.username}).then(function(user) {
 //VerifyPassword
  if(!user)
   return res.status(401).send('No such user ' + req.body.username);

  if(!user.verifyPassword(req.body.password))
   return res.status(401).send('Wrong password for user ' + user.username);

 //Provide the user with the access token
  var token = jwt.sign({ subject: user.id, role: user.role }, 'myAppSecret');
  res.setHeader('Authorization', 'Bearer ' + token.toString());
  res.json(user);
 })
.catch(function (e) { res.status(500).json(e); });
});

//In angular...
.factory('jwtInterceptor', function() {
 return {
  request: function(config){
   var authHeader = config.headers('authorization');
   //Attach header if not present
   if(!authHeader)
    config.headers.authorization = 'Bearer ' + localStorage.get('myAppToken');
   return config;
  },
  response: function(response){
   //Look for token in the header if you get a response and save it
   var authHeader = response.headers('authorization');
   if(authHeader){
    try { localStorage.myAppToken = authHeader.split(' ')[1]; } catch(e) {}
   }
   return response;
  }
 }
});

Notable mention: check out auth0's repos for NodeJS and Angular. Both are awesome.

You can create a service which when loaded by angular make a get call for authorization token and set in header. Through this you do not need to set token at every Ajax call. You can do it like this:

app.service("MyService", ["$http", function($http) {
    initialize();

    function initialize() {
        getAuthorizationToken().then(function(response) {
            $http.defaults.headers.common.Authorization = 'Bearer some_auth_code_here';
        });
    }

    function getAuthorizationToken() {
        // Get call for token
    }
}]);