Ajout du token JWT dans le requêtes
pour être authentifier dans l'API
This commit is contained in:
@@ -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,8 +146,8 @@ 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]
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -5,5 +5,5 @@ export class User {
|
|||||||
firstName: string;
|
firstName: string;
|
||||||
lastName: string;
|
lastName: string;
|
||||||
authdata?: string;
|
authdata?: string;
|
||||||
expired?: number;
|
token?: string;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user