title: Angular login in users with local storage, nothing stored
body: <p>I'm trying to log in users with Angular (6.0.2) and I'm doing this by saving "current user" to local storage, but nothing gets stored. Here's the code:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable, of } from 'rxjs';
  import { map, catchError } from 'rxjs/operators'
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { Userlogon } from '../_models/Userlogon';
  import { User } from '../_models/User';
  
  const HttpOptions = {
    headers: new HttpHeaders({ "Content-type": "application/json" })
  };
  
  @Injectable({
    providedIn: 'root'
  })
  export class AuthService {
    loginobject: any;
    private usersUrl= '/api/v1/accounts/';
    private logonUrl= '/api/v1/auth/login/';
    private logoutUrl= '/api/v1/auth/logout/';
  
    constructor(
      private http: HttpClient
    ) { }
  
    login(username: string, password: string) {
      this.loginobject=JSON.stringify({"username": username, "password": password});
      return this.http.post&lt;any&gt;(this.logonUrl, this.loginobject, HttpOptions)
        .pipe(map(user =&gt; {
          if (user &amp;&amp; user.token){
            localStorage.setItem('currentUser', JSON.stringify(user));
            return console.log(user);
          }
        }));
    }
  
    logout(){
      localStorage.removeItem('currentUser');
      return this.http.get&lt;any&gt;(this.logoutUrl).subscribe(response =&gt; console.log(response));
    }
  }
  </code></pre>
  
  <p>And here is the Auth-Guard:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
  import { AuthService } from '../_services/auth.service';
  
  @Injectable({
    providedIn: 'root'
  })
  export class AuthGuardService implements CanActivate {
  
    constructor(
      private router: Router,
    ) { }
  
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
      if(localStorage.getItem('currentUser')){
        return true;
      }
      this.router.navigate(['/login'], { queryParams: { returnUrl : state.url }});
      return false;
    }
  }
  </code></pre>
  
  <p>It returns a console log of the authenticated user from the back-end which luckily works as intented but nothing is stored locally. Is there something that should be enabled for me to be able to store things locally, or is it something else that might be wrong?</p>
  
  <p>Picture of debugger: <a href="https://i.stack.imgur.com/xnfzL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xnfzL.png" alt="enter image description here"></a></p>
  
  <p>Picture of console log at login:
  <a href="https://i.stack.imgur.com/OhhLf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OhhLf.png" alt="enter image description here"></a></p>