Angular basic authentication and token - angularjs

Question

I'm getting crazy to understand how to handle a basic authentication with an API.
Basically what I need to do is to request a token from an API sending a module-username and module-password (not a user login). The server should return a token that I will need to use for all other request I will make to the server.
Looking on internet I've found solution that involves user logins and angular routing.
I'm not using any routing, the routing is managed server side and I need to consume the API on few pages, before consuming I need to attach the token to every request.
I don't understand exactly how to start properly.
I should need to create an ajax request for the first authentication, save the token somewhere and use it for all other requestes. Keeping in mind that if the token is not valid I should request it again.
I'm quite confused on how to do it, I can not find any good tutorial.
Any help?

Answer 1

I'm still learning Angular myself, but hopefully this basic example helps you. You can use $cookies to save and retrieve a token that is sent back from your server. Then, assuming you are using $http or $resource, you can use an $httpProvider interceptors to add the current token value (retrieved from $cookies) to the header of every outgoing request your app makes.
Here's a simple example of how you might create an $httpProvider interceptor:
authServices.factory('sendTokenInHeader', ['$cookies', function($cookies) {
return {
request: function(config) {
var token = $cookies.getObject('x-my-token');
if(token) {
var updateHeaders = config.headers || {};
updateHeaders['x-my-token'] = token;
config.headers = updateHeaders;
}
return config;
}
};
}]);
Then in your app.config you need to just push this interceptor and now any outgoing $http/$resource request will include the current token!
myApp.config(['$httpProvider', function($httpProvider) {
// do other stuff...
$httpProvider.interceptors.push('sendTokenInHeaders');
}]);