angular2 authenticate to spring http basic auth with end user credentials - spring

Question

I have a bunch of REST web services powered by Spring Boot. These web services are protected by a basic http authentication.
I try to create an Angular2 front end, hosted on another server. I want the front end to interact with the spring boot back end, using credentials provided by the user in the front end.
Right now, the user can log in through the angular2 front end, but then, even with user authenticate, each call to the back end requires authentication, which is normal I guess.
So my question is: how can I tell angular2 to automatically add the authorization header with the user credentials only when the user is logged?
Thanks for your help

Answer 1

I would have a look at what Ben Nadel has done http://www.bennadel.com/blog/3047-creating-specialized-http-clients-in-angular-2-beta-8.htm (or the typescript version by Sam Storie https://blog.sstorie.com/adapting-ben-nadels-apigateway-to-pure-typescript/). I have not had a chance to use this in an app yet, but it seems very promising.
Also, if you have not already, I would take a look at Dave Syer's Spring Boot and AngularJS tutorials (https://spring.io/guides/tutorials/spring-security-and-angular-js/). They are written for Angular 1, but they are very useful.
Below is my "solution". It works, but I am not thrilled with it:
main.ts:
import { CsrfBaseRequestOptions } from './app/shared';
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
...
provide(RequestOptions, { useClass: CsrfBaseRequestOptions })
]);
XhrBaseRequestOptions:
#Injectable()
export class XhrBaseRequestOptions extends BaseRequestOptions {
constructor() {
super();
this.headers.append('X-Requested-With', 'XMLHttpRequest');
}
}
CsrfBaseRequestOptions:
import { Injectable } from '#angular/core';
import { XhrBaseRequestOptions } from './xhr-base-request-options';
#Injectable()
export class CsrfBaseRequestOptions extends XhrBaseRequestOptions {
constructor() {
super();
let csrfToken = this.getCsrfToken('X-CSRF-TOKEN');
if (csrfToken) {
this.headers.append('X-CSRF-TOKEN', csrfToken);
}
}
getCsrfToken(tokenName:string):string {
let tokenNameEQ = tokenName + '=';
let ck = document.cookie;
let ca = ck.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(tokenNameEQ) === 0) return c.substring(tokenNameEQ.length, c.length);
}
return null;
}
}

Answer 2

We have a similar situation and used a custom service to handle the auth-header.
The service has a Http injected and if a JWT is available in localstorage it adds the auth header to the get/post request
let authHeader = new Headers();
authHeader.append('Authorization', 'Bearer ' + jwt);
And then add it to the request via
this.http.get(url, { headers: authHeader });
Hope that helps...