Implementing authentication

src/app/admin/admin.module.ts

@@ -4,15 +4,17 @@ import { FormsModule } from "@angular/forms";
 import { RouterModule } from "@angular/router";
 import { AuthComponent } from "./auth.component";
 import { AdminComponent } from "./admin.component";
+import { AuthGard } from "./auth.gard";
 
 let routing = RouterModule.forChild([
     { path: "auth", component: AuthComponent },
-    { path: "main", component: AdminComponent },
+    { path: "main", component: AdminComponent, canActivate: [AuthGard] },
     { path: "**", redirectTo: "auth" },
 ])
 
 @NgModule({
     imports: [CommonModule, FormsModule, routing],
+    providers: [AuthGard],
     declarations: [AuthComponent, AdminComponent]
 })
 export class AdminModule{}

src/app/admin/auth.component.ts

@@ -1,6 +1,7 @@
 import { Component } from "@angular/core";
 import { NgForm } from "@angular/forms";
 import { Router } from "@angular/router";
+import { AuthService } from "../model/auth.service";
 
 @Component({
     templateUrl: "auth.component.html"
@@ -12,12 +13,17 @@ export class AuthComponent {
     public password: string;
     public errorMessage: string;
 
-    constructor(private router: Router){}
+    constructor(private router: Router, private auth: AuthService){}
 
     authenticate(form: NgForm) {
         if (form.valid) {
             //perform authentication
-            this.router.navigateByUrl("/admin/main");
+            this.auth.authenticate(this.username, this.password).subscribe(response => {
+                if (response) {
+                    this.router.navigateByUrl("/admin/main");
+                }
+                this.errorMessage = "Authentication Failed"
+            })
         } else {
             this.errorMessage = "Form data invalid";
         }

src/app/admin/auth.gard.ts

@@ -0,0 +1,18 @@
+import { Inject, Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
+import { AuthService } from "../model/auth.service";
+
+@Injectable()
+export class AuthGard {
+
+    constructor(private router: Router, private auth: AuthService) {}
+
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+        if (!this.auth.authenticated) {
+            this.router.navigateByUrl("/admin/auth");
+            return false;
+        }
+        return true;
+    }
+
+}

src/app/model/auth.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { RestDataSource } from "./rest.datasource";
+
+@Injectable()
+export class AuthService {
+
+    constructor(private datasource: RestDataSource) {}
+
+    authenticate(username: string, password: string): Observable<boolean> {
+        return this.datasource.authenticate(username, password);
+    }
+
+    get authenticated(): boolean {
+        return this.datasource.auth_token != null;
+    }
+
+    clear() {
+        this.datasource.auth_token = null;
+    }
+
+}

src/app/model/model.module.ts

@@ -6,11 +6,12 @@ import { Order } from "./order.model";
 import { OrderRepository } from "./order.repository";
 import { RestDataSource } from "./rest.datasource";
 import { HttpClientModule } from "@angular/common/http";
+import { AuthService } from "./auth.service";
 
 @NgModule({
     imports: [HttpClientModule],
     providers: [ProductRepository, Cart, Order, OrderRepository, 
-        { provide: StaticDataSource, useClass: RestDataSource }]
+        { provide: StaticDataSource, useClass: RestDataSource }, RestDataSource, AuthService]
 })
 
 export class ModelModule {}

src/app/model/rest.datasource.ts

@@ -4,6 +4,7 @@ import { Observable } from "rxjs";
 import { Product } from "./product.model";
 import { Cart } from "./cart.model";
 import { Order } from "./order.model";
+import { map } from "rxjs";
 
 const PROTOCOL = "http";
 const PORT = 3500;
@@ -12,6 +13,7 @@ const PORT = 3500;
 export class RestDataSource {
 
     baseUrl: string;
+    auth_token: string;
 
     constructor(private http: HttpClient) {
         this.baseUrl = `${PROTOCOL}://${location.hostname}:${PORT}/`
@@ -25,4 +27,13 @@ export class RestDataSource {
         console.log(JSON.stringify(order));
         return this.http.post<Order>(this.baseUrl + "orders", order);
     }
+
+    authenticate(user: string, pass: string): Observable<boolean> {
+        return this.http.post<any>(this.baseUrl + "login", {
+            name: user, password: pass
+        }).pipe(map(response => {
+            this.auth_token = response.success ? response.token : null;
+            return response.success;
+        }))
+    }
 }