diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts index b7ae154..d5ebc57 100644 --- a/src/app/admin/admin.module.ts +++ b/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{} \ No newline at end of file diff --git a/src/app/admin/auth.component.ts b/src/app/admin/auth.component.ts index 098400e..73eb2be 100644 --- a/src/app/admin/auth.component.ts +++ b/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"; } diff --git a/src/app/admin/auth.gard.ts b/src/app/admin/auth.gard.ts new file mode 100644 index 0000000..2bde2fd --- /dev/null +++ b/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; + } + +} \ No newline at end of file diff --git a/src/app/model/auth.service.ts b/src/app/model/auth.service.ts new file mode 100644 index 0000000..5fa6188 --- /dev/null +++ b/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 { + return this.datasource.authenticate(username, password); + } + + get authenticated(): boolean { + return this.datasource.auth_token != null; + } + + clear() { + this.datasource.auth_token = null; + } + +} \ No newline at end of file diff --git a/src/app/model/model.module.ts b/src/app/model/model.module.ts index 8d53221..4f2cff8 100644 --- a/src/app/model/model.module.ts +++ b/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 {} \ No newline at end of file diff --git a/src/app/model/rest.datasource.ts b/src/app/model/rest.datasource.ts index b67b2d2..8870b73 100644 --- a/src/app/model/rest.datasource.ts +++ b/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(this.baseUrl + "orders", order); } + + authenticate(user: string, pass: string): Observable { + return this.http.post(this.baseUrl + "login", { + name: user, password: pass + }).pipe(map(response => { + this.auth_token = response.success ? response.token : null; + return response.success; + })) + } } \ No newline at end of file