From 2ab83316400841a9f837e12f4bc75523348e661d Mon Sep 17 00:00:00 2001 From: Peter Rossa Date: Thu, 11 May 2023 13:06:17 +0200 Subject: [PATCH] Rename and add interceptor; adjust service --- rossa-tech-cli/src/app/app.module.ts | 80 +++++++------ .../interceptors/authInterceptor.ts | 57 +++++++++ .../interceptors/httpInterceptor.service.ts | 49 -------- .../src/app/services/auth.service.spec.ts | 24 ++-- .../src/app/services/auth.service.ts | 112 +++++++++--------- .../src/app/services/database.service.ts | 30 ++--- 6 files changed, 177 insertions(+), 175 deletions(-) create mode 100644 rossa-tech-cli/src/app/components/interceptors/authInterceptor.ts delete mode 100644 rossa-tech-cli/src/app/components/interceptors/httpInterceptor.service.ts diff --git a/rossa-tech-cli/src/app/app.module.ts b/rossa-tech-cli/src/app/app.module.ts index 80843e0..b8b1655 100644 --- a/rossa-tech-cli/src/app/app.module.ts +++ b/rossa-tech-cli/src/app/app.module.ts @@ -1,39 +1,41 @@ -import { NgModule } from "@angular/core"; -import { BrowserModule, DomSanitizer } from "@angular/platform-browser"; +import { NgModule } from '@angular/core'; +import { BrowserModule, DomSanitizer } from '@angular/platform-browser'; -import { FormsModule, ReactiveFormsModule } from "@angular/forms"; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { AppRoutingModule } from "./app-routing.module"; -import { HttpClientModule } from "@angular/common/http"; -import { AppComponent } from "./app.component"; -import { LoginComponent } from "./components/loginPage/login.component"; -import { IndexComponent } from "./components/indexPage/index.component"; -import { DashboardComponent } from "./components/dashboard/dashboard.component"; -import { MeterDataListComponent } from "./components/subcomponents/meter-data-list/meter-data-list.component"; -import { ConsumptionLastYearComponent } from "./components/subcomponents/consumption-last-year/consumption-last-year.component"; -import { MeterDataWrapperComponent } from "./components/subcomponents/meter-data-wrapper/meter-data-wrapper.component"; -import { HeaderComponent } from "./components/header/header.component"; -import { LoaderComponent } from "./components/loader/loader.component"; -import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppRoutingModule } from './app-routing.module'; +import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http'; +import { AppComponent } from './app.component'; +import { LoginComponent } from './components/loginPage/login.component'; +import { IndexComponent } from './components/indexPage/index.component'; +import { DashboardComponent } from './components/dashboard/dashboard.component'; +import { MeterDataListComponent } from './components/subcomponents/meter-data-list/meter-data-list.component'; +import { ConsumptionLastYearComponent } from './components/subcomponents/consumption-last-year/consumption-last-year.component'; +import { MeterDataWrapperComponent } from './components/subcomponents/meter-data-wrapper/meter-data-wrapper.component'; +import { HeaderComponent } from './components/header/header.component'; +import { LoaderComponent } from './components/loader/loader.component'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +import { MatCardModule } from '@angular/material/card'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatSelectModule } from '@angular/material/select'; +import { MatTableModule } from '@angular/material/table'; +import { MatProgressBarModule } from '@angular/material/progress-bar'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { MatSidenavModule } from '@angular/material/sidenav'; +import { MatIconModule, MatIconRegistry } from '@angular/material/icon'; +import { MatListModule } from '@angular/material/list'; +import { MatGridListModule } from '@angular/material/grid-list'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDatepickerModule } from '@angular/material/datepicker'; +import { MatNativeDateModule } from '@angular/material/core'; +import { MeterDataAddDialogComponent } from './dialogs/meter-data-add-dialog/meter-data-add-dialog.component'; +import { SnackbarComponent } from './components/snackbar/snackbar.component'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; +import { AuthInterceptor } from './components/interceptors/authInterceptor'; -import { MatCardModule } from "@angular/material/card"; -import { MatFormFieldModule } from "@angular/material/form-field"; -import { MatInputModule } from "@angular/material/input"; -import { MatSelectModule } from "@angular/material/select"; -import { MatTableModule } from "@angular/material/table"; -import { MatProgressBarModule } from "@angular/material/progress-bar"; -import { MatToolbarModule } from "@angular/material/toolbar"; -import { MatSidenavModule } from "@angular/material/sidenav"; -import { MatIconModule, MatIconRegistry } from "@angular/material/icon"; -import { MatListModule } from "@angular/material/list"; -import { MatGridListModule } from "@angular/material/grid-list"; -import { MatDialogModule } from "@angular/material/dialog"; -import { MatButtonModule } from "@angular/material/button"; -import { MatDatepickerModule } from "@angular/material/datepicker"; -import { MatNativeDateModule } from "@angular/material/core"; -import { MeterDataAddDialogComponent } from "./dialogs/meter-data-add-dialog/meter-data-add-dialog.component"; -import { SnackbarComponent } from "./components/snackbar/snackbar.component"; -import { MatSnackBarModule } from "@angular/material/snack-bar"; @NgModule({ declarations: [ AppComponent, @@ -74,18 +76,18 @@ import { MatSnackBarModule } from "@angular/material/snack-bar"; ], providers: [ MatDatepickerModule, - // { - // provide: HTTP_INTERCEPTORS, - // useClass: HttpInterceptorService, - // multi: true, - // }, + { + provide: HTTP_INTERCEPTORS, + useClass: AuthInterceptor, + multi: true, + }, ], bootstrap: [AppComponent], }) export class AppModule { constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) { matIconRegistry.addSvgIconSet( - domSanitizer.bypassSecurityTrustResourceUrl("./assets/mdi.svg") + domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg') ); } } diff --git a/rossa-tech-cli/src/app/components/interceptors/authInterceptor.ts b/rossa-tech-cli/src/app/components/interceptors/authInterceptor.ts new file mode 100644 index 0000000..06b7c09 --- /dev/null +++ b/rossa-tech-cli/src/app/components/interceptors/authInterceptor.ts @@ -0,0 +1,57 @@ +import { + HttpInterceptor, + HttpRequest, + HttpHandler, + HttpEvent, + HttpHeaders, +} from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { AuthService } from 'src/app/auth/auth.service'; +import { LoginService } from 'src/app/auth/login.service'; +import { UserService } from 'src/app/services/user.service'; + +@Injectable() +export class AuthInterceptor implements HttpInterceptor { + constructor( + private authService: AuthService, + private loginService: LoginService + ) {} + + intercept( + req: HttpRequest, + next: HttpHandler + ): Observable> { + if ( + this.authService.checkUserLoggedIn() && + req.url.indexOf('authenticate') === -1 + ) { + console.log('if'); + + let jwtToken: String = this.loginService.getUserSecurityToken(); + // headers: HttpHeaders = new HttpHeaders({ + // authorization: "bearer " + jwtToken, + // }), + // options = { headers: headers }; + + const authReq = req.clone({ + headers: new HttpHeaders({ + 'Content-Type': 'application/json', + authorization: 'bearer ' + jwtToken, + // headers: new HttpHeaders({ + // 'Content-Type': 'application/json', + // Authorization: `Basic ${window.btoa( + // this.authenticationService.username + + // ':' + + // this.authenticationService.password + // )}`, + }), + }); + console.log(authReq); + return next.handle(authReq); + } else { + console.log('else'); + return next.handle(req); + } + } +} diff --git a/rossa-tech-cli/src/app/components/interceptors/httpInterceptor.service.ts b/rossa-tech-cli/src/app/components/interceptors/httpInterceptor.service.ts deleted file mode 100644 index 73b7619..0000000 --- a/rossa-tech-cli/src/app/components/interceptors/httpInterceptor.service.ts +++ /dev/null @@ -1,49 +0,0 @@ -// import { -// HttpInterceptor, -// HttpRequest, -// HttpHandler, -// HttpEvent, -// HttpHeaders, -// } from '@angular/common/http'; -// import { Injectable } from '@angular/core'; -// import { Observable } from 'rxjs'; -// import { AuthenticationService } from 'src/app/services/auth.service'; - -// @Injectable() -// export class HttpInterceptorService implements HttpInterceptor { -// constructor(private authenticationService: AuthenticationService) {} - -// intercept( -// req: HttpRequest, -// next: HttpHandler -// ): Observable> { -// console.log( -// this.authenticationService.username, -// this.authenticationService.password -// ); -// if ( -// this.authenticationService.isUserLoggedIn() && -// req.url.indexOf('basicauth') === -1 -// ) { -// console.log('if'); -// const authReq = req.clone({ -// headers: new HttpHeaders({ -// 'Content-Type': 'application/json', -// Authorization: `Basic ${window.btoa('pezi:Password123!')}`, -// // headers: new HttpHeaders({ -// // 'Content-Type': 'application/json', -// // Authorization: `Basic ${window.btoa( -// // this.authenticationService.username + -// // ':' + -// // this.authenticationService.password -// // )}`, -// }), -// }); -// console.log(authReq); -// return next.handle(authReq); -// } else { -// console.log('else'); -// return next.handle(req); -// } -// } -// } diff --git a/rossa-tech-cli/src/app/services/auth.service.spec.ts b/rossa-tech-cli/src/app/services/auth.service.spec.ts index f1251ca..1515212 100644 --- a/rossa-tech-cli/src/app/services/auth.service.spec.ts +++ b/rossa-tech-cli/src/app/services/auth.service.spec.ts @@ -1,16 +1,16 @@ -import { TestBed } from '@angular/core/testing'; +// import { TestBed } from '@angular/core/testing'; -import { AuthService } from './auth.service'; +// import { AuthService } from './auth.service'; -describe('AuthService', () => { - let service: AuthService; +// describe('AuthService', () => { +// let service: AuthService; - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(AuthService); - }); +// beforeEach(() => { +// TestBed.configureTestingModule({}); +// service = TestBed.inject(AuthService); +// }); - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); +// it('should be created', () => { +// expect(service).toBeTruthy(); +// }); +// }); diff --git a/rossa-tech-cli/src/app/services/auth.service.ts b/rossa-tech-cli/src/app/services/auth.service.ts index 2858ffd..4a6a99b 100644 --- a/rossa-tech-cli/src/app/services/auth.service.ts +++ b/rossa-tech-cli/src/app/services/auth.service.ts @@ -1,65 +1,65 @@ -import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; -import { map } from 'rxjs/operators'; +// import { HttpClient } from '@angular/common/http'; +// import { Injectable } from '@angular/core'; +// import { map } from 'rxjs/operators'; -@Injectable({ - providedIn: 'root', -}) -export class AuthenticationService { - // BASE_PATH: 'http://localhost:8080' - USER_NAME_SESSION_ATTRIBUTE_NAME = 'authenticatedUser'; +// @Injectable({ +// providedIn: 'root', +// }) +// export class AuthenticationService { +// // BASE_PATH: 'http://localhost:8080' +// USER_NAME_SESSION_ATTRIBUTE_NAME = 'authenticatedUser'; - public username: string | undefined; - public password: string | undefined; +// public username: string | undefined; +// public password: string | undefined; - constructor(private http: HttpClient) {} +// constructor(private http: HttpClient) {} - authenticationService(username: string, password: string) { - // return this.http - // .get(`http://localhost:8080/authenticate`, { - // // .get(`http://localhost:8080/`, { - // headers: { - // 'Content-Type': 'application/json', - // Authorization: this.createBasicAuthToken(username, password), - // }, - // }) - return this.http - .post('http://localhost:8080/hello', { - userName: username, - userPass: password, - }) - .pipe( - map((res) => { - this.username = username; - this.password = password; - this.registerSuccessfulLogin(username, password); - }) - ); - } +// authenticationService(username: string, password: string) { +// // return this.http +// // .get(`http://localhost:8080/authenticate`, { +// // // .get(`http://localhost:8080/`, { +// // headers: { +// // 'Content-Type': 'application/json', +// // Authorization: this.createBasicAuthToken(username, password), +// // }, +// // }) +// return this.http +// .post('http://localhost:8080/hello', { +// userName: username, +// userPass: password, +// }) +// .pipe( +// map((res) => { +// this.username = username; +// this.password = password; +// this.registerSuccessfulLogin(username, password); +// }) +// ); +// } - createBasicAuthToken(username: string, password: string) { - return 'Basic ' + window.btoa(username + ':' + password); - } +// createBasicAuthToken(username: string, password: string) { +// return 'Basic ' + window.btoa(username + ':' + password); +// } - registerSuccessfulLogin(username: string, password: string) { - sessionStorage.setItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME, username); - } +// registerSuccessfulLogin(username: string, password: string) { +// sessionStorage.setItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME, username); +// } - logout() { - sessionStorage.removeItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME); - this.username = undefined; - this.password = undefined; - } +// logout() { +// sessionStorage.removeItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME); +// this.username = undefined; +// this.password = undefined; +// } - isUserLoggedIn() { - let user = sessionStorage.getItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME); - if (user === undefined) return false; - return true; - } +// isUserLoggedIn() { +// let user = sessionStorage.getItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME); +// if (user === undefined) return false; +// return true; +// } - getLoggedInUserName() { - let user = sessionStorage.getItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME); - if (user === undefined) return ''; - return user; - } -} +// getLoggedInUserName() { +// let user = sessionStorage.getItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME); +// if (user === undefined) return ''; +// return user; +// } +// } diff --git a/rossa-tech-cli/src/app/services/database.service.ts b/rossa-tech-cli/src/app/services/database.service.ts index 71fec86..66bf8b0 100644 --- a/rossa-tech-cli/src/app/services/database.service.ts +++ b/rossa-tech-cli/src/app/services/database.service.ts @@ -1,34 +1,26 @@ -import { Injectable } from "@angular/core"; +import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse, HttpHeaders, -} from "@angular/common/http"; -import { Observable, throwError } from "rxjs"; -import { catchError } from "rxjs/operators"; -import { environment } from "src/environments/environment"; -import { MeterData } from "../dataModels/Meterdata"; -import { Meter } from "../dataModels/Meter"; -import { LoginService } from "../auth/login.service"; +} from '@angular/common/http'; +import { Observable, throwError } from 'rxjs'; +import { catchError } from 'rxjs/operators'; +import { environment } from 'src/environments/environment'; +import { MeterData } from '../dataModels/Meterdata'; +import { Meter } from '../dataModels/Meter'; @Injectable({ - providedIn: "root", + providedIn: 'root', }) export class DatabaseService { private baseUrl = environment.apiBaseUrl; - constructor(private http: HttpClient, private userService: LoginService) {} + constructor(private http: HttpClient) {} getMeterData(): Observable { const url = `${this.baseUrl}/meter-data`; - let jwtToken: String = this.userService.getUserSecurityToken(), - headers: HttpHeaders = new HttpHeaders({ - authorization: "bearer " + jwtToken, - }), - options = { headers: headers }; - return this.http - .get(url, options) - .pipe(catchError(this.handleError)); + return this.http.get(url).pipe(catchError(this.handleError)); } getMeterDataByType(usageType: string): Observable { @@ -53,7 +45,7 @@ export class DatabaseService { if (error.error instanceof ErrorEvent) { // A client-side or network error occurred. Handle it accordingly. - console.error("An error occurred:", error.error.message); + console.error('An error occurred:', error.error.message); } else { // The backend returned an unsuccessful response code. // The response body may contain clues as to what went wrong.