Angular and Firebase App

Author: Your Name

src/app/shared/security/auth-info.ts

@@ -0,0 +1,17 @@
+
+
+
+export class AuthInfo {
+
+    constructor(
+        public $uid:string
+    ) {
+
+    }
+
+
+    isLoggedIn() {
+        return !!this.$uid;
+    }
+
+}

src/app/shared/security/auth.service.ts

@@ -1,11 +1,17 @@
 import { Injectable } from '@angular/core';
-import {Observable, Subject} from "rxjs/Rx";
+import {Observable, Subject, BehaviorSubject} from "rxjs/Rx";
 import {FirebaseAuth, FirebaseAuthState} from "angularfire2/index";
+import {AuthInfo} from "./auth-info";
 
 @Injectable()
 export class AuthService {
 
 
+  static UNKNOWN_USER = new AuthInfo(null);
+
+  authInfo$: BehaviorSubject<AuthInfo> = new BehaviorSubject<AuthInfo>(AuthService.UNKNOWN_USER);
+
+
   constructor(private auth: FirebaseAuth) {
 
   }
@@ -26,10 +32,13 @@ export class AuthService {
 
         promise
             .then(res => {
+                    const authInfo = new AuthInfo(this.auth.getAuth().uid);
+                    this.authInfo$.next(authInfo);
                     subject.next(res);
                     subject.complete();
                 },
                 err => {
+                    this.authInfo$.error(err);
                     subject.error(err);
                     subject.complete();
                 });

src/app/top-menu/top-menu.component.html

@@ -12,13 +12,15 @@
                routerLinkActive="menu-active">Courses</a>
         </li>
         <li>
-            <a routerLinkActive="menu-active" routerLink="login">Login</a>
+            <a routerLinkActive="menu-active" routerLink="login"
+                *ngIf="!authInfo?.isLoggedIn()">Login</a>
         </li>
         <li>
-            <a routerLinkActive="menu-active" routerLink="register">Register</a>
+            <a routerLinkActive="menu-active" routerLink="register"
+               *ngIf="!authInfo?.isLoggedIn()">Register</a>
         </li>
         <li>
-            <a>Logout</a>
+            <a *ngIf="authInfo?.isLoggedIn()">Logout</a>
         </li>
     </ul>
 

src/app/top-menu/top-menu.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import {AuthService} from "../shared/security/auth.service";
+import {AuthInfo} from "../shared/security/auth-info";
 
 @Component({
   selector: 'top-menu',
@@ -7,9 +9,20 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TopMenuComponent implements OnInit {
 
-  constructor() { }
+  authInfo: AuthInfo;
+
+  constructor(private authService:AuthService) {
+
+
+
+  }
 
   ngOnInit() {
+
+
+      this.authService.authInfo$.subscribe(authInfo =>  this.authInfo = authInfo);
+
+
   }
 
 }