title: Angular2 : update sidenav component when user authenticated
body: <p>hope you're well.</p>
  
  <p><strong>My challenge</strong></p>
  
  <ul>
  <li>Right now I have my app set up in the following way:
  
  <ul>
  <li>App Component
  
  <ul>
  <li>Side Nav Component</li>
  <li>Content Component
  
  <ul>
  <li>Toolbar Component   </li>
  <li>Router Outlet</li>
  </ul></li>
  </ul></li>
  </ul></li>
  <li>When the user logs in via the <strong>LogInPageComponent</strong> (displayed in the router outlet), the component uses my <strong>AuthService</strong> which makes a call to my Django backend and returns either True or False if the user could be authenticated.</li>
  <li>At this point, the <strong>SideNavComponent</strong> should, ideally, listen in on this change and show all of the available links instead of just "Log in".</li>
  </ul>
  
  <p><strong>What I've tried</strong></p>
  
  <ul>
  <li><p>I read online that I can set a <strong>Behavior Subject</strong> object to a boolean depending on whether the user is logged in.</p>
  
  <ul>
  <li><p>Then, in the SideNavComponent I would subscribe to this Behavior Subject and when it changes, the SideNavComponent should just respond to this change.</p></li>
  <li><p>However, in practise the SideNavComponent is able to take the initial state of the Behavior Subject object, but when I change its value to True (when the user is authenticated), SideNavComponent doesn't seem to be listening. Code below:</p></li>
  </ul></li>
  </ul>
  
  <p><strong>auth.service.ts</strong></p>
  
  <pre><code>private _logInUrl: string = "http://127.0.0.1:8000/search/login/";
  
  subject: BehaviorSubject&lt;boolean&gt; = new BehaviorSubject&lt;boolean&gt;(false);
  subjectObj = this.subject.asObservable();
  val: boolean;
  
  authenticateUser(username, password) {
  
      let headers = new Headers({
          'Content-Type': 'application/json',
          'X-CSRFToken': this.getCookie('csrftoken')
      });
  
      let options = new RequestOptions({ headers: headers });
  
      return this._http
          .post(
              this._logInUrl,
              JSON.stringify({"uname": username, "pword" : password}),
              options)
          .map(res =&gt; res.json().login_data)
          .map((res) =&gt; {
              if (res.logged_in === true) {
                  this.subject.next(true);
              } else {
                  this.subject.next(false);
              }
  
              return res.logged_in;
  
          });
  
  }
  </code></pre>
  
  <p><strong>sidenav.component.ts</strong></p>
  
  <pre><code>subscription: Subscription;
  val: boolean;
  
  constructor(private _authService: AuthService, private _router: Router) {
  
      this.subscription = this._authService.subjectObj.subscribe(res =&gt; {
          this.val = res;
      });
  
  }
  </code></pre>
  
  <p>The odd thing is that I have an equivalent <strong>logOut()</strong> function in my AuthService which sets the BehaviorSubject to false. When that's called, the SideNavComponent hears the change immediately and appropriately shows the relevant links. <strong>I suspect that this works because the logOut() function is called from the SideNavComponent itself, which is then subscribed to the BehaviorSubject. When the user logs in, however, the LogIn() function is called from the LogInPageComponent, and the SideNavComponent is just listening in as a third party</strong>.</p>
  
  <p><strong>auth.service.ts</strong></p>
  
  <pre><code>logOut() {
      return this._http.get(this._logOutUrl)
          .map(res =&gt; {
              this.subject.next(false);
              console.log("Auth: logged out.");
              return res.json().confirmation;
          });
  }
  </code></pre>
  
  <p>Am I missing something? Any idea how I can make SideNavComponent aware once AuthService knows that the user is logged in?</p>
  
  <p>Thanks, guys!</p>
  
  <p>Nick</p>