title: Calling `next` of rxjs `Subject` cancels the http call
body: <p>I have an application where to logout a user, I have to hit a REST endpoint. In my angular 2 frontend, I have the following service which handles this:</p>
  
  <pre><code>@Injectable()
  export class AuthService {
  
    private authEvents: Subject&lt;boolean&gt;;
  
    constructor(private http: Http) {
      this.authEvents = new Subject&lt;boolean&gt;();
    }
  
    login(email: string, password: string): Observable&lt;Response&gt; {
      const url = 'rest/auth/login';
      const body = {
        email: email,
        password: password
      };
      return this.http.post(url, body)
        .do((res: Response) =&gt; {
          localStorage.setItem('currentUser', JSON.stringify(res.json()));
          this.authEvents.next(true);
        });
    }
  
    logout(): Observable&lt;Response&gt; {
      const url = 'rest/auth/logout';
      return this.http.post(url, {})
        .do((res: Response) =&gt; {
          localStorage.removeItem('currentUser');
          console.log('hereee!');
          this.authEvents.next(false);
        });
    }
  
    isSignedIn(): boolean {
      return localStorage.getItem('currentUser') !== null;
    }
  
    get events(): Observable&lt;boolean&gt; {
      return this.authEvents;
    }
  
  }
  </code></pre>
  
  <p>Let me explain what I am trying to do here. I have a <code>authEvents</code> subject which I subscribe to in my component like so:</p>
  
  <pre><code>ngOnInit() {
    this.isSignedIn = this.authService.isSignedIn();
    this.authService.events.subscribe(() =&gt; {
      this.isSignedIn = this.authService.isSignedIn();
    });
  }
  </code></pre>
  
  <p>When the user clicks logout button, I call the following function in this component:</p>
  
  <pre><code>logout() {
    this.authService.logout()
      .subscribe(() =&gt; {
        this.router.navigate(['/home']);
      }, e =&gt; this.handleError(e));
  }
  </code></pre>
  
  <p>The problem is that the browser redirects to home even when the call to logout is not yet complete. So effectively, sometimes the frontend successfully logs out, and sometimes it doesn't! What am I doing wrong here?</p>
  
  <p>Note: the session on backend always logs out since the http call does happen. I would also like to see how to use Observables (and rxjs in general) to achieve this, although if too much trouble then Promises can be used.</p>