Ajout du token JWT dans le requêtes

pour être authentifier dans l'API
This commit is contained in:
Sébastien André
2020-03-20 14:18:44 +01:00
parent 4a67b9a5f6
commit 8dc6310080
5 changed files with 135 additions and 77 deletions

View File

@@ -1,69 +1,97 @@
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from '@angular/core'; import { NgModule } from "@angular/core";
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from "@angular/router";
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; 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 { SummaryComponent } from "./summary/summary.component";
import { ListOfJumpsComponent } from './list-of-jumps/list-of-jumps.component'; import { ListOfJumpsComponent } from "./list-of-jumps/list-of-jumps.component";
import { ListOfDzsComponent } from './list-of-dzs/list-of-dzs.component'; import { ListOfDzsComponent } from "./list-of-dzs/list-of-dzs.component";
import { NewJumpComponent } from './new-jump/new-jump.component'; import { NewJumpComponent } from "./new-jump/new-jump.component";
import { ListOfAircraftsComponent } from './list-of-aircrafts/list-of-aircrafts.component'; import { ListOfAircraftsComponent } from "./list-of-aircrafts/list-of-aircrafts.component";
import { ListOfJumpTypesComponent } from './list-of-jump-types/list-of-jump-types.component'; import { ListOfJumpTypesComponent } from "./list-of-jump-types/list-of-jump-types.component";
import { ListOfGearsComponent } from './list-of-gears/list-of-gears.component'; import { ListOfGearsComponent } from "./list-of-gears/list-of-gears.component";
import { NewAircraftComponent } from './new-aircraft/new-aircraft.component'; import { NewAircraftComponent } from "./new-aircraft/new-aircraft.component";
import { NewGearComponent } from './new-gear/new-gear.component'; import { NewGearComponent } from "./new-gear/new-gear.component";
import { NewDropZoneComponent } from './new-drop-zone/new-drop-zone.component'; import { NewDropZoneComponent } from "./new-drop-zone/new-drop-zone.component";
import { NewJumpTypeComponent } from './new-jump-type/new-jump-type.component'; import { NewJumpTypeComponent } from "./new-jump-type/new-jump-type.component";
import { DefaultComponent } from './default/default.component'; import { DefaultComponent } from "./default/default.component";
import { LoginComponent } from './login/login.component'; import { LoginComponent } from "./login/login.component";
import { DateService } from '../services/date.service'; import { DateService } from "../services/date.service";
import { AircraftService } from '../services/aircraft.service'; import { AircraftService } from "../services/aircraft.service";
import { DropzoneService } from '../services/dropzone.service'; import { DropzoneService } from "../services/dropzone.service";
import { GearService } from '../services/gear.service'; import { GearService } from "../services/gear.service";
import { JumpService } from '../services/jump.service'; import { JumpService } from "../services/jump.service";
import { JumpTypeService } from '../services/jump-type.service'; import { JumpTypeService } from "../services/jump-type.service";
import { StatsService } from '../services/stats.service'; import { StatsService } from "../services/stats.service";
import { ServiceComm } from '../services/service-comm.service'; import { ServiceComm } from "../services/service-comm.service";
import { RequestCache } from '../services/request-cache.service'; import { RequestCache } from "../services/request-cache.service";
import { AuthGuardService } from '../services/auth-guard.service'; import { AuthGuardService } from "../services/auth-guard.service";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { MatAutocompleteModule } from "@angular/material/autocomplete";
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from "@angular/material/button";
import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatCheckboxModule } from "@angular/material/checkbox";
import { MatOptionModule, MatNativeDateModule } from '@angular/material/core'; import { MatOptionModule, MatNativeDateModule } from "@angular/material/core";
import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatDatepickerModule } from "@angular/material/datepicker";
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from "@angular/material/form-field";
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from "@angular/material/icon";
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from "@angular/material/input";
import { MatPaginatorModule } from '@angular/material/paginator'; import { MatPaginatorModule } from "@angular/material/paginator";
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import { MatSelectModule } from '@angular/material/select'; import { MatSelectModule } from "@angular/material/select";
import { MatTableModule } from '@angular/material/table'; 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 { 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 = [ 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: "summary",
{ path: 'dzs', component: ListOfDzsComponent, canActivate: [AuthGuardService] }, component: SummaryComponent,
{ path: 'newjump', component: NewJumpComponent, canActivate: [AuthGuardService] }, canActivate: [AuthGuardService]
{ path: 'aircrafts', component: ListOfAircraftsComponent, canActivate: [AuthGuardService] }, },
{ path: 'jumpTypes', component: ListOfJumpTypesComponent, canActivate: [AuthGuardService] }, {
{ path: 'gears', component: ListOfGearsComponent, 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({ @NgModule({
@@ -118,9 +146,9 @@ const appRoutes: Routes = [
DateService, DateService,
RequestCache, RequestCache,
// { provide: HTTP_INTERCEPTORS, useClass: CachingInterceptor, multi: true } // { provide: HTTP_INTERCEPTORS, useClass: CachingInterceptor, multi: true }
{ provide: HTTP_INTERCEPTORS, useClass: BasicAuthInterceptor, multi: true }, { provide: HTTP_INTERCEPTORS, useClass: JwtAuthInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }, { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule {}

View File

@@ -1,14 +1,22 @@
import { Injectable } from '@angular/core'; import { Injectable } from "@angular/core";
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http'; import {
import { Observable } from 'rxjs'; 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() @Injectable()
export class BasicAuthInterceptor implements HttpInterceptor { export class BasicAuthInterceptor implements HttpInterceptor {
constructor(private authenticationService: AuthenticationService) { } constructor(private authenticationService: AuthenticationService) {}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { intercept(
request: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
// add authorization header with basic auth credentials if available // add authorization header with basic auth credentials if available
const currentUser = this.authenticationService.currentUserValue; const currentUser = this.authenticationService.currentUserValue;
if (currentUser && currentUser.authdata) { if (currentUser && currentUser.authdata) {

View File

@@ -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<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
// 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);
}
}

View File

@@ -5,5 +5,5 @@ export class User {
firstName: string; firstName: string;
lastName: string; lastName: string;
authdata?: string; authdata?: string;
expired?: number; token?: string;
} }

View File

@@ -25,14 +25,6 @@ export class AuthenticationService extends BaseService {
} }
public get currentUserValue(): User { 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; return this.currentUserSubject.value;
} }
@@ -43,15 +35,13 @@ export class AuthenticationService extends BaseService {
}; };
return this.http return this.http
.post<any>(`${this.apiUrl}/User/Authenticate`, bodyLogin, { .post<User>(`${this.apiUrl}/User/Authenticate`, bodyLogin, {
headers: this.headers headers: this.headers
}) })
.pipe( .pipe(
map(user => { map(user => {
// store user details and basic auth credentials in local storage to keep user logged in between page refreshes // 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.authdata = window.btoa(username + ":" + password);
user.expired = this.dateService.AddDays(new Date(), 1).getTime();
localStorage.setItem("currentUser", JSON.stringify(user)); localStorage.setItem("currentUser", JSON.stringify(user));
this.currentUserSubject.next(user); this.currentUserSubject.next(user);
return user; return user;