Setting Headers (token) of multiple objects once user is authenticated in Angular2 - authentication

Question

Hi I've created a generic service from which I can create objects with generic http requests.
The challenge I'm facing now is to pass to each created object a token into their headers if the user is authenticated (i will get a token as response, which is stored in the localStorage)
So basically I can create these custom http objects anywhere (component-wise by injection) on any level. All of them don't have the Authentication Header set yet. Once User is authenticated, all these object to have their Authentication Header set.
Here's the plunker
export class App {
myHttpObject1;
constructor(private myAuth:MyAuth, private myDatabase:MyDatabase) {
this.name = 'Angular2 (Release Candidate!)'
this.myHttpObject1 = this.myDatabase.httpSchema('users')
this.myHttpObject1.log()
// this.myHttpObject1.someOtherMethodes()...
}
login(){
this.myAuth.login()
}
showHeaders(){
this.myHttpObject1.log()
}
}
Below is the Service and one to mock a login.
#Injectable()
export class MyDatabase{
private base_url:string;
private headers :Headers;
constructor(){
this.base_url = 'https://jsonplaceholder.typicode.com/';
this.headers = new Headers();
this.headers.append('Content-Type', 'application/json');
this.headers.append('Authorization','');
}
public httpSchema(path:string){
return new MyHttpObject(path, this.headers || new Headers())
}
}
class MyHttpObject{
constructor(public url:string, public headers:Headers){
}
log(){
console.log(this.url)
console.log(this.headers)
}
post(){
console.log('here could be a http post')
}
}
#Injectable()
export class MyAuth{
login(){
setTimeout(()=>{
console.log('logged In');
localStorage.setItem('token':'mytoken');
},2000)
}
}

Answer 1

Look at the Http Injector, it intercepts the call and adds whatever you need to the http object.