Logout permission error related to subscribed observable
<p>I have a component where I've subscribed to an observable to pull data from Firebase.  The relevant subscription code looks something like:</p>

<p>[<strong>Note:</strong> updated/corrected code below.]</p>

<pre class="lang-js prettyprint-override"><code>// in my component
ngOnInit() {
  // this.af is an injected AngularFire2 instance
  this.tasks = this.af.database.list('/tasks')
    .subscribe(tasks =&gt; this.tasks = tasks);
}
</code></pre>

<p>The user must be authenticated to view this component, and I have a route guard in place that ensures this.</p>

<p>However, when I logout I get this error:</p>

<blockquote>
  <p>Client doesn't have permission to access the desired data</p>
</blockquote>

<p>I'm logging out with something like:</p>

<pre class="lang-js prettyprint-override"><code>// this.auth is an injected FirebaseAuth instance
this.auth.logout();
this.router.navigate(['/login']);
</code></pre>

<p>The error occurs before the router <code>navigate</code> method is called.  The problem is that I have this active tasks observer subscription with an open web socket connection that errors out right after the <code>logout</code> method is called because the user is no longer authenticated.</p>

<p>The tasks subscription and the logout functionality are in different parts of my app.  If they were in the same place, I guess I could call the <code>unsubscribe</code> method on the subscription when I logout.  But even so, it seems messy to stick this subscription canceling logic in my <code>logout</code> method.  I'm not quite sure how to deal with this. </p>

<p>How do I handle canceling the subscription to the tasks observer on logout?</p>

<h2>Updated code after Alexander Leonov's comment about duplicate assignment</h2>

<p>Alexander pointed out that I was assigning to the <code>this.tasks</code> property twice.  Good point!  This bit of code was incorrect.  I wasn't assigning the subscription to a property.  The code should have looked like this:</p>

<pre class="lang-js prettyprint-override"><code>ngOnInit() {
  // this.af is an injected AngularFire2 instance
  this.af.database.list('/tasks')
    .subscribe(tasks =&gt; this.tasks = tasks);
}
</code></pre>

<p>Thanks for pointing that out, Alexander.</p>

<h2>Solution: What I ended up doing</h2>

<p>I was able to resolve this partly with Alexander Leonov's comment about unsubscribing with <code>ngOnDestroy</code> in my component.</p>

<p>Using his code in my tasks component:</p>

<pre class="lang-js prettyprint-override"><code>ngOnInit() {
  this.subscription = this.af.database.list('/tasks')
    .subscribe(tasks =&gt; this.tasks = tasks);
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}
</code></pre>

<p>The other part of the solution involved subscribing to the AngularFire auth observable in my top level component, the AppComponent.  If authenticated, it redirects to one route; if not, it redirects to another route:</p>

<pre class="lang-js prettyprint-override"><code>this.authService.auth$.subscribe((currentUser) =&gt; {
  if (currentUser) {
    this.router.navigate(['/tasks']);
  } else {
    this.router.navigate(['/login']);
  }
});
</code></pre>

<p>When logging out, this subscription is notified and the user is redirected to the login route.  This sequence of events ends up triggering the <code>ngOnDestroy</code> method on my component, which unsubscribes from the tasks AngularFire observable.</p>