Angular 2-仅在用户登录时在导航栏上显示某些元素

Question

I am working on my first project in Angular 2, and I am working on user authentication and features related to it. Everything is going well and the documentation/examples has served me very well so far.

Currently, I am attempting to implement the feature of only showing certain links on my site's navbar when a user is logged in, and other links when there is no user logged in. However, my current implementation does not work as intended. The links in my navbar only change when the page is reloaded and it finds that there is/isn't an authenticated user. The following is my current implementation:

Here is my app.component.html file, it is used as a "base template" for my site:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="">Project Name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a *ngIf="loggedIn" routerLink="my-log">My Log</a></li>
        <li><a *ngIf="loggedIn">My Team</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a *ngIf="loggedIn" (click)="logout()">Logout</a></li>
        <li><a *ngIf="!loggedIn" routerLink="register">Sign Up</a></li>
        <li><a *ngIf="!loggedIn" routerLink="login">Login</a></li>
      </ul>
    </div>
  </div>
</nav>
<router-outlet></router-outlet>

and my app.component.ts file, which is getting loggedIn from a authentication service, which basically checks localStorage for a authentication token which is from a Django Rest api that serves as my backend for authentication:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

import { AuthenticationService } from './authentication/authentication.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loggedIn = false;

  constructor(private auth: AuthenticationService, private router: Router) {
    this.loggedIn = this.auth.isLoggedIn();
  }

  logout() {
    localStorage.removeItem('authToken');
    this.router.navigate(['/login']);
  }
}

and finally, in case it is of use, the authentication service that I created to manage whether a user is logged in or not:

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';

import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';


@Injectable()
export class AuthenticationService {
    private baseApiUrl = 'http://localhost:8000/api/';
    private loggedIn = false;

    constructor(private http: Http) {
        this.loggedIn = !!localStorage.getItem('authToken');
     }

    private extractData(res: Response) {
        let body = res.json();
        return body;
    }

    userLogin(username: string, password: string) {
        let url = this.baseApiUrl + 'login/';
        let body = JSON.stringify({'username': username, 'password': password});
        let headers = new Headers({'Content-Type': 'application/json'});
        let options = new RequestOptions({ headers: headers });

        return this.http.post(url, body, options).map(this.extractData);
    }

    isLoggedIn() {
        return this.loggedIn;
    }
}

My dillema comes in when I am either logging in or logging out. Before I log in, the navbar displays only the "Register" and "Login" links. After I log in, I am redirected to the "My Log" page, but the navbar's contents do not get updated. Instead of providing links to "My Log", "My Team" and "Logout", the links for "Register" and "Login" are still present in the navbar. The same problem is present with logout as well.

Am I headed in the right direction with my current implementation? If not, is there an easy solution/anything in Angular 2 that can help me implement the feature that I have described?

Answer 1

You may update your code like below,

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';

import { Observable } from 'rxjs/Rx';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/map';    

@Injectable()
export class AuthenticationService {
    private baseApiUrl = 'http://localhost:8000/api/';
    // change loggedIn to a subject
    private loggedIn: Subject<boolean> = new Subject<boolean>();

    // make isLoggedIn public readonly
    get isLoggedIn() {
        return this.loggedIn.asObservable();
    }
    constructor(private http: Http) {
        this.loggedIn.next(!!localStorage.getItem('authToken'));
     }

    private extractData(res: Response) {
        let body = res.json();
        return body;
    }

    userLogin(username: string, password: string) {
        let url = this.baseApiUrl + 'login/';
        let body = JSON.stringify({'username': username, 'password': password});
        let headers = new Headers({'Content-Type': 'application/json'});
        let options = new RequestOptions({ headers: headers });

        return this.http.post(url, body, options).map(this.extractData);

        // set this.loggedIn.next inside this.extractData method
    }       
}

In your component use below,

loggedIn: any;

constructor(private auth: AuthenticationService, private router: Router) {
    this.loggedIn = this.auth.isLoggedIn;
  }

and use async pipe in template bindings.

Hope this helps!!