Simple access_token Pattern in Angular JS

In a recent work I did I had to solve the problem of automatic insertion of Authorization header in all subsequent requests to a REST service after authenticating with it. Here is a simple solution I came up with:

(function(){
angular.module('RestClient', [])
.constant('authmap', {})
.config(function($httpProvider) {
    $httpProvider.interceptors.push(function($q, authmap) {
        return {
            'request' : function(config) {
                // Is this http[s] URL
                if (/^http[s]?:\/\//i.test(config.url)) {
                    // Check authmap if it has key that is prefix of config.url
                    var access_token;
                    for (var key in authmap){
                        // Is key a prefix?
                        if (config.url.indexOf(key) === 0) {
                            access_token = authmap[key];
                            break; // Found access token so break
                        }
                    };
                    if (!!access_token) {
                        // Yes, inject Authorization header
                        config.headers.Authorization = 'Bearer ' + access_token;
                    }}
                }
                return config;
            }
        };
    });
})
.factory('AuthenticationService', function($http, authmap) {
    return {
        login : function(target, email, password) {
           var authentication = ...; // Authenticate and get access_token
            // Record access_token for target
            // This will be used by the interceptor to
            // supply Authorization header
            authmap[target] = authentication.access_token;

        },
        isLoggedIn: function(target){
            return !!(authmap[target]);
        },
        logout : function(target) {
            if (!!target) {
                if (this.isLoggedIn(target)) {
                    // Forget access_token for target
                    delete authmap[target];
                }
            }
        }
    };
});
})();

IMHO this approach is better than the approach described here where one globally sets the $http.defaults.headers.common.Authorization header, because that affects all requests.

This was written for angular 1.2+.

The code does not show how you authenticate. It assumes that you got back a authentication object with property access_token in it.

I hope folks find it useful.

Charcoal

Koi

Still life II

All in a days work!

Still life

NetFlix queue style list reordering using AngularJS

Looking at the code you will see that it was kind of difficult to implement this. I ran into several issues with ng-repeat, it's scope, child isolated scopes and $scope.$broadcast and so on. I will blog about those some other time.

This is implemented a reorder directive (which introduces it's own 'isolate' scope) that must wrap the content inside ng-repeat. The reorder directive itself transcludes [1] the contents. As noted above the reorder directive introduces an 'isolate' scope...which may affect some assumptions made by other included content about the $parent scope. I may have to solve it differently.

In any case, here is the demo:

Plunker

Well, drag and drop reordering is probably a better and direct UI paradigm for this kind of stuff. But this is accessible.

A simple JSON object editor using AngularJS

I want to develop a generic JSON editor, driven by json-schema. In preparation for that I developed a simple AngularJS directive editproperty. This directive lets you edit the object in a single line. Also implemented the new directive editobjectproperty. This displays the object and allows direct editing.

You can play with these directives here:

Note that the object keys are sorted.

This demo does not seem to work on Internet Explorer™ - the reason being IE does not like the directives as elements. May have to convert to directives as attributes.

You can download the implementation of the directive here. The implementation uses '=' (which sets up bi-directional binding) style scope to pass in the object from outer scope into the directive. Here is an excellent video by John Lindquist explaining the '=' scope. It also makes use of the $last variable of the ng-repeat directive to deal with comma formatting. I wish looping structures in all languages had some of these kinds of syntactic sugar such as first, last, non-first, even, odd.

BTW this was an excellent exercise in learning the recursive directive and template behavior of AngularJS.

Plunker

Try out

• Add
• Update
• Remove

use cases.

Well...you will say "What is the big deal? I can edit the JSON object as a simple text much faster"...and you would be right. The power of this will become apparent once I hook it up to JSON-schema. With that the property editor will only allow valid JSON object structure and property values in compliance with JSON-schema. I will be using this to implement Chrome Packaged App Manifest Version 2 Editor App.

I found Jsonary.com which is a similar concept. I will explore writing custom renderers using AngularJS and Twitter Bootstrap.

Todo

• Support object properties
• Support array properties  - partially done. I may have to write a new directive editarray .
• Support direct editing of property name and value in editobject tag
• Dropdown of existing properties to select from to edit or remove