diff --git a/Front/skydivelogs-app/src/app/app.module.ts b/Front/skydivelogs-app/src/app/app.module.ts index 15e7e19..79b43a2 100644 --- a/Front/skydivelogs-app/src/app/app.module.ts +++ b/Front/skydivelogs-app/src/app/app.module.ts @@ -1,69 +1,97 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; -import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; +import { BrowserModule } from "@angular/platform-browser"; +import { NgModule } from "@angular/core"; +import { RouterModule, Routes } from "@angular/router"; +import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http"; -import { AppComponent } from './app.component'; +import { AppComponent } from "./app.component"; -import { SummaryComponent } from './summary/summary.component'; -import { ListOfJumpsComponent } from './list-of-jumps/list-of-jumps.component'; -import { ListOfDzsComponent } from './list-of-dzs/list-of-dzs.component'; -import { NewJumpComponent } from './new-jump/new-jump.component'; -import { ListOfAircraftsComponent } from './list-of-aircrafts/list-of-aircrafts.component'; -import { ListOfJumpTypesComponent } from './list-of-jump-types/list-of-jump-types.component'; -import { ListOfGearsComponent } from './list-of-gears/list-of-gears.component'; -import { NewAircraftComponent } from './new-aircraft/new-aircraft.component'; -import { NewGearComponent } from './new-gear/new-gear.component'; -import { NewDropZoneComponent } from './new-drop-zone/new-drop-zone.component'; -import { NewJumpTypeComponent } from './new-jump-type/new-jump-type.component'; -import { DefaultComponent } from './default/default.component'; -import { LoginComponent } from './login/login.component'; +import { SummaryComponent } from "./summary/summary.component"; +import { ListOfJumpsComponent } from "./list-of-jumps/list-of-jumps.component"; +import { ListOfDzsComponent } from "./list-of-dzs/list-of-dzs.component"; +import { NewJumpComponent } from "./new-jump/new-jump.component"; +import { ListOfAircraftsComponent } from "./list-of-aircrafts/list-of-aircrafts.component"; +import { ListOfJumpTypesComponent } from "./list-of-jump-types/list-of-jump-types.component"; +import { ListOfGearsComponent } from "./list-of-gears/list-of-gears.component"; +import { NewAircraftComponent } from "./new-aircraft/new-aircraft.component"; +import { NewGearComponent } from "./new-gear/new-gear.component"; +import { NewDropZoneComponent } from "./new-drop-zone/new-drop-zone.component"; +import { NewJumpTypeComponent } from "./new-jump-type/new-jump-type.component"; +import { DefaultComponent } from "./default/default.component"; +import { LoginComponent } from "./login/login.component"; -import { DateService } from '../services/date.service'; -import { AircraftService } from '../services/aircraft.service'; -import { DropzoneService } from '../services/dropzone.service'; -import { GearService } from '../services/gear.service'; -import { JumpService } from '../services/jump.service'; -import { JumpTypeService } from '../services/jump-type.service'; -import { StatsService } from '../services/stats.service'; -import { ServiceComm } from '../services/service-comm.service'; -import { RequestCache } from '../services/request-cache.service'; -import { AuthGuardService } from '../services/auth-guard.service'; +import { DateService } from "../services/date.service"; +import { AircraftService } from "../services/aircraft.service"; +import { DropzoneService } from "../services/dropzone.service"; +import { GearService } from "../services/gear.service"; +import { JumpService } from "../services/jump.service"; +import { JumpTypeService } from "../services/jump-type.service"; +import { StatsService } from "../services/stats.service"; +import { ServiceComm } from "../services/service-comm.service"; +import { RequestCache } from "../services/request-cache.service"; +import { AuthGuardService } from "../services/auth-guard.service"; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { MatAutocompleteModule } from '@angular/material/autocomplete'; -import { MatButtonModule } from '@angular/material/button'; -import { MatCheckboxModule } from '@angular/material/checkbox'; -import { MatOptionModule, MatNativeDateModule } from '@angular/material/core'; -import { MatDatepickerModule } from '@angular/material/datepicker'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatIconModule } from '@angular/material/icon'; -import { MatInputModule } from '@angular/material/input'; -import { MatPaginatorModule } from '@angular/material/paginator'; -import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; -import { MatSelectModule } from '@angular/material/select'; -import { MatTableModule } from '@angular/material/table'; - -import { CachingInterceptor } from '../interceptor/caching.interceptor'; -import { BasicAuthInterceptor } from '../interceptor/basic-auth.interceptor'; -import { ErrorInterceptor } from '../interceptor/error.interceptor'; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { FormsModule, ReactiveFormsModule } from "@angular/forms"; +import { MatAutocompleteModule } from "@angular/material/autocomplete"; +import { MatButtonModule } from "@angular/material/button"; +import { MatCheckboxModule } from "@angular/material/checkbox"; +import { MatOptionModule, MatNativeDateModule } from "@angular/material/core"; +import { MatDatepickerModule } from "@angular/material/datepicker"; +import { MatFormFieldModule } from "@angular/material/form-field"; +import { MatIconModule } from "@angular/material/icon"; +import { MatInputModule } from "@angular/material/input"; +import { MatPaginatorModule } from "@angular/material/paginator"; +import { MatProgressSpinnerModule } from "@angular/material/progress-spinner"; +import { MatSelectModule } from "@angular/material/select"; +import { MatTableModule } from "@angular/material/table"; +import { CachingInterceptor } from "../interceptor/caching.interceptor"; +//import { BasicAuthInterceptor } from '../interceptor/basic-auth.interceptor'; +import { JwtAuthInterceptor } from "../interceptor/jwt-auth.interceptor"; +import { ErrorInterceptor } from "../interceptor/error.interceptor"; const appRoutes: Routes = [ - { path: '', component: DefaultComponent, canActivate: [AuthGuardService] }, + { path: "", component: DefaultComponent, canActivate: [AuthGuardService] }, - { path: 'summary', component: SummaryComponent, canActivate: [AuthGuardService] }, - { path: 'jumps', component: ListOfJumpsComponent, canActivate: [AuthGuardService] }, - { path: 'dzs', component: ListOfDzsComponent, canActivate: [AuthGuardService] }, - { path: 'newjump', component: NewJumpComponent, canActivate: [AuthGuardService] }, - { path: 'aircrafts', component: ListOfAircraftsComponent, canActivate: [AuthGuardService] }, - { path: 'jumpTypes', component: ListOfJumpTypesComponent, canActivate: [AuthGuardService] }, - { path: 'gears', component: ListOfGearsComponent, canActivate: [AuthGuardService] }, + { + path: "summary", + component: SummaryComponent, + canActivate: [AuthGuardService] + }, + { + path: "jumps", + component: ListOfJumpsComponent, + canActivate: [AuthGuardService] + }, + { + path: "dzs", + component: ListOfDzsComponent, + canActivate: [AuthGuardService] + }, + { + path: "newjump", + component: NewJumpComponent, + canActivate: [AuthGuardService] + }, + { + path: "aircrafts", + component: ListOfAircraftsComponent, + canActivate: [AuthGuardService] + }, + { + path: "jumpTypes", + component: ListOfJumpTypesComponent, + canActivate: [AuthGuardService] + }, + { + path: "gears", + component: ListOfGearsComponent, + canActivate: [AuthGuardService] + }, - { path: 'login', component: LoginComponent }, + { path: "login", component: LoginComponent }, - { path: '**', redirectTo: '' } + { path: "**", redirectTo: "" } ]; @NgModule({ @@ -118,9 +146,9 @@ const appRoutes: Routes = [ DateService, RequestCache, // { provide: HTTP_INTERCEPTORS, useClass: CachingInterceptor, multi: true } - { provide: HTTP_INTERCEPTORS, useClass: BasicAuthInterceptor, multi: true }, - { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }, + { provide: HTTP_INTERCEPTORS, useClass: JwtAuthInterceptor, multi: true }, + { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true } ], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule {} diff --git a/Front/skydivelogs-app/src/interceptor/basic-auth.interceptor.ts b/Front/skydivelogs-app/src/interceptor/basic-auth.interceptor.ts index 4281e07..2486b09 100644 --- a/Front/skydivelogs-app/src/interceptor/basic-auth.interceptor.ts +++ b/Front/skydivelogs-app/src/interceptor/basic-auth.interceptor.ts @@ -1,14 +1,22 @@ -import { Injectable } from '@angular/core'; -import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http'; -import { Observable } from 'rxjs'; +import { Injectable } from "@angular/core"; +import { + HttpRequest, + HttpHandler, + HttpEvent, + HttpInterceptor +} from "@angular/common/http"; +import { Observable } from "rxjs"; -import { AuthenticationService } from '../services/authentication.service'; +import { AuthenticationService } from "../services/authentication.service"; @Injectable() export class BasicAuthInterceptor implements HttpInterceptor { - constructor(private authenticationService: AuthenticationService) { } + constructor(private authenticationService: AuthenticationService) {} - intercept(request: HttpRequest, next: HttpHandler): Observable> { + intercept( + request: HttpRequest, + next: HttpHandler + ): Observable> { // add authorization header with basic auth credentials if available const currentUser = this.authenticationService.currentUserValue; if (currentUser && currentUser.authdata) { diff --git a/Front/skydivelogs-app/src/interceptor/jwt-auth.interceptor.ts b/Front/skydivelogs-app/src/interceptor/jwt-auth.interceptor.ts new file mode 100644 index 0000000..b56f6cb --- /dev/null +++ b/Front/skydivelogs-app/src/interceptor/jwt-auth.interceptor.ts @@ -0,0 +1,32 @@ +import { Injectable } from "@angular/core"; +import { + HttpRequest, + HttpHandler, + HttpEvent, + HttpInterceptor +} from "@angular/common/http"; +import { Observable } from "rxjs"; + +import { AuthenticationService } from "../services/authentication.service"; + +@Injectable() +export class JwtAuthInterceptor implements HttpInterceptor { + constructor(private authenticationService: AuthenticationService) {} + + intercept( + request: HttpRequest, + next: HttpHandler + ): Observable> { + // add authorization header with basic auth credentials if available + const currentUser = this.authenticationService.currentUserValue; + if (currentUser && currentUser.token) { + request = request.clone({ + setHeaders: { + Authorization: `Bearer ${currentUser.token}` + } + }); + } + + return next.handle(request); + } +} diff --git a/Front/skydivelogs-app/src/models/user.ts b/Front/skydivelogs-app/src/models/user.ts index 8937564..11fea34 100644 --- a/Front/skydivelogs-app/src/models/user.ts +++ b/Front/skydivelogs-app/src/models/user.ts @@ -5,5 +5,5 @@ export class User { firstName: string; lastName: string; authdata?: string; - expired?: number; + token?: string; } diff --git a/Front/skydivelogs-app/src/services/authentication.service.ts b/Front/skydivelogs-app/src/services/authentication.service.ts index 698af7e..681258d 100644 --- a/Front/skydivelogs-app/src/services/authentication.service.ts +++ b/Front/skydivelogs-app/src/services/authentication.service.ts @@ -25,14 +25,6 @@ export class AuthenticationService extends BaseService { } public get currentUserValue(): User { - const tmp = localStorage.getItem("currentUser"); - if (tmp) { - const storedUser = JSON.parse(tmp); - if (new Date().getTime() > storedUser.expired) { - localStorage.removeItem("currentUser"); - } - } - return this.currentUserSubject.value; } @@ -43,15 +35,13 @@ export class AuthenticationService extends BaseService { }; return this.http - .post(`${this.apiUrl}/User/Authenticate`, bodyLogin, { + .post(`${this.apiUrl}/User/Authenticate`, bodyLogin, { headers: this.headers }) .pipe( map(user => { // store user details and basic auth credentials in local storage to keep user logged in between page refreshes user.authdata = window.btoa(username + ":" + password); - user.expired = this.dateService.AddDays(new Date(), 1).getTime(); - localStorage.setItem("currentUser", JSON.stringify(user)); this.currentUserSubject.next(user); return user;