How do I edit the authorization header of an HTTP GET request originating from a hyperlink (<a href> tag)

Question

I have an Angular application that stores JWT tokens in localstorage to provide authentication. What I want to do is figure out how to grab this JWT token and insert it into an HTTP GET request, that renders as a completely new web page (NOT a returned object from an XMLHTTP request that displays in the same page...).

Is this possible? The only way I've found to do something similar would be to use basic HTTP authorization, such as:

username:[email protected]

And I'm assuming I could pass in my entire JWT there.

I'm using Express.js to handle routing on my Node.js backend.

Answer 1

Simply readout the JWT from your locale storage and then insert the JWT to the Authorization Header or you could add it as a GET parameter.

I would recommend the header.

On the next side simple read the JWT out.

If the processing is needed on all pages of the express instance, do it in the express-middleware.

Update

If you want to use a normal link you must use a parameter like ?auth_token=12345.

To add it was a header you can use $http and use a method in your controller. For example:

Controller

$scope.openLink = function() {
    var config = {
        headers:  {
            'Authorization': '12345',
        }
    };

    $http.get("<your url>", config);
}

View

<a href="#" ng-click="openLink()">Test</a>

Shielding Admin Interface

To be secure you should add roles in your api and only allow the administration relevant calls for administrators and also check on angular side if the user is allowed to open the UI with the role the user has. For angular there are a few acl modules like: github.com/mikemclin/angular-acl