title: Where to store the user credentials in an Angular application?
body: <p>The angular client application is running on <code>http://localhost:4200</code></p>
  
  <p>It communicates with a Spring based Restful API running on <code>http://localhost:8080</code>
  The authentication mechanism at backend is <code>http basic</code>, and for every request Spring internally invokes a filter to check the authenticity of the credentials passed from the Angular client when a user logs in.</p>
  
  <p>When a user logs in, his/her credentials are encoded with <code>Base64.encodeBase64</code>
  and set into the <code>Authorization</code> header.</p>
  
  <pre><code>private getHeaders(){
  
      let headers = new Headers();
      headers.append('Accept', 'application/json');
      headers.append('Content-Type', 'application/json');
      headers.append('Authorization','Basic ' + btoa("bill:abc123"));
      return headers;
  }
  </code></pre>
  
  <p>The btoa function is used to set the <code>Authorization</code> header. This works great and <code>TLS/ HTTPS</code> will be used to encrypt the credentials to securely pass over the network.</p>
  
  <p>For subsequent request, I need to pass the same credentials every time. So, where should I store the user credentials, once he/she has logged in successfully for subsequent requests?</p>
  
  <p>For example, this request:</p>
  
  <pre><code>addEmployee( employee : Employee ) : Observable&lt;Response&gt; {
        return this.http.post('http://localhost:8080/employee/', JSON.stringify(employee),
              {headers: this.getHeaders()}).map(res =&gt; res.json());
    }
  </code></pre>