Angular basic authentication and token

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?

I think you have said pretty much in your post "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.". This seems to be the typical work flow. — ABOS
– ABOS, Commented May 7, 2015 at 12:12
this is the theory. But in terms of coding with Angular how should organise all of this? — Ayeye Brazo
– Ayeye Brazo, Commented May 7, 2015 at 13:48
This is almost step by step process and I don't see any difficulty of doing that. Anything seems difficult from you? — ABOS
– ABOS, Commented May 7, 2015 at 15:47

cocoabythefire · Accepted Answer · 2015-08-18 17:56:26Z

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');
}]);

Collectives™ on Stack Overflow

Angular basic authentication and token

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related