Rename and add interceptor; adjust service

This commit is contained in:
Peter Rossa
2023-05-11 13:06:17 +02:00
parent 54905ed995
commit 2ab8331640
6 changed files with 177 additions and 175 deletions

View File

@@ -1,39 +1,41 @@
import { NgModule } from "@angular/core"; import { NgModule } from '@angular/core';
import { BrowserModule, DomSanitizer } from "@angular/platform-browser"; 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 { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from "@angular/common/http"; import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AppComponent } from "./app.component"; import { AppComponent } from './app.component';
import { LoginComponent } from "./components/loginPage/login.component"; import { LoginComponent } from './components/loginPage/login.component';
import { IndexComponent } from "./components/indexPage/index.component"; import { IndexComponent } from './components/indexPage/index.component';
import { DashboardComponent } from "./components/dashboard/dashboard.component"; import { DashboardComponent } from './components/dashboard/dashboard.component';
import { MeterDataListComponent } from "./components/subcomponents/meter-data-list/meter-data-list.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 { ConsumptionLastYearComponent } from './components/subcomponents/consumption-last-year/consumption-last-year.component';
import { MeterDataWrapperComponent } from "./components/subcomponents/meter-data-wrapper/meter-data-wrapper.component"; import { MeterDataWrapperComponent } from './components/subcomponents/meter-data-wrapper/meter-data-wrapper.component';
import { HeaderComponent } from "./components/header/header.component"; import { HeaderComponent } from './components/header/header.component';
import { LoaderComponent } from "./components/loader/loader.component"; import { LoaderComponent } from './components/loader/loader.component';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; 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({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
@@ -74,18 +76,18 @@ import { MatSnackBarModule } from "@angular/material/snack-bar";
], ],
providers: [ providers: [
MatDatepickerModule, MatDatepickerModule,
// { {
// provide: HTTP_INTERCEPTORS, provide: HTTP_INTERCEPTORS,
// useClass: HttpInterceptorService, useClass: AuthInterceptor,
// multi: true, multi: true,
// }, },
], ],
bootstrap: [AppComponent], bootstrap: [AppComponent],
}) })
export class AppModule { export class AppModule {
constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) { constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
matIconRegistry.addSvgIconSet( matIconRegistry.addSvgIconSet(
domSanitizer.bypassSecurityTrustResourceUrl("./assets/mdi.svg") domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg')
); );
} }
} }

View File

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

View File

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

View File

@@ -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', () => { // describe('AuthService', () => {
let service: AuthService; // let service: AuthService;
beforeEach(() => { // beforeEach(() => {
TestBed.configureTestingModule({}); // TestBed.configureTestingModule({});
service = TestBed.inject(AuthService); // service = TestBed.inject(AuthService);
}); // });
it('should be created', () => { // it('should be created', () => {
expect(service).toBeTruthy(); // expect(service).toBeTruthy();
}); // });
}); // });

View File

@@ -1,65 +1,65 @@
import { HttpClient } from '@angular/common/http'; // import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core'; // import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators'; // import { map } from 'rxjs/operators';
@Injectable({ // @Injectable({
providedIn: 'root', // providedIn: 'root',
}) // })
export class AuthenticationService { // export class AuthenticationService {
// BASE_PATH: 'http://localhost:8080' // // BASE_PATH: 'http://localhost:8080'
USER_NAME_SESSION_ATTRIBUTE_NAME = 'authenticatedUser'; // USER_NAME_SESSION_ATTRIBUTE_NAME = 'authenticatedUser';
public username: string | undefined; // public username: string | undefined;
public password: string | undefined; // public password: string | undefined;
constructor(private http: HttpClient) {} // constructor(private http: HttpClient) {}
authenticationService(username: string, password: string) { // authenticationService(username: string, password: string) {
// return this.http // // return this.http
// .get(`http://localhost:8080/authenticate`, { // // .get(`http://localhost:8080/authenticate`, {
// // .get(`http://localhost:8080/`, { // // // .get(`http://localhost:8080/`, {
// headers: { // // headers: {
// 'Content-Type': 'application/json', // // 'Content-Type': 'application/json',
// Authorization: this.createBasicAuthToken(username, password), // // Authorization: this.createBasicAuthToken(username, password),
// }, // // },
// }) // // })
return this.http // return this.http
.post<any>('http://localhost:8080/hello', { // .post<any>('http://localhost:8080/hello', {
userName: username, // userName: username,
userPass: password, // userPass: password,
}) // })
.pipe( // .pipe(
map((res) => { // map((res) => {
this.username = username; // this.username = username;
this.password = password; // this.password = password;
this.registerSuccessfulLogin(username, password); // this.registerSuccessfulLogin(username, password);
}) // })
); // );
} // }
createBasicAuthToken(username: string, password: string) { // createBasicAuthToken(username: string, password: string) {
return 'Basic ' + window.btoa(username + ':' + password); // return 'Basic ' + window.btoa(username + ':' + password);
} // }
registerSuccessfulLogin(username: string, password: string) { // registerSuccessfulLogin(username: string, password: string) {
sessionStorage.setItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME, username); // sessionStorage.setItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME, username);
} // }
logout() { // logout() {
sessionStorage.removeItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME); // sessionStorage.removeItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME);
this.username = undefined; // this.username = undefined;
this.password = undefined; // this.password = undefined;
} // }
isUserLoggedIn() { // isUserLoggedIn() {
let user = sessionStorage.getItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME); // let user = sessionStorage.getItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME);
if (user === undefined) return false; // if (user === undefined) return false;
return true; // return true;
} // }
getLoggedInUserName() { // getLoggedInUserName() {
let user = sessionStorage.getItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME); // let user = sessionStorage.getItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME);
if (user === undefined) return ''; // if (user === undefined) return '';
return user; // return user;
} // }
} // }

View File

@@ -1,34 +1,26 @@
import { Injectable } from "@angular/core"; import { Injectable } from '@angular/core';
import { import {
HttpClient, HttpClient,
HttpErrorResponse, HttpErrorResponse,
HttpHeaders, HttpHeaders,
} from "@angular/common/http"; } from '@angular/common/http';
import { Observable, throwError } from "rxjs"; import { Observable, throwError } from 'rxjs';
import { catchError } from "rxjs/operators"; import { catchError } from 'rxjs/operators';
import { environment } from "src/environments/environment"; import { environment } from 'src/environments/environment';
import { MeterData } from "../dataModels/Meterdata"; import { MeterData } from '../dataModels/Meterdata';
import { Meter } from "../dataModels/Meter"; import { Meter } from '../dataModels/Meter';
import { LoginService } from "../auth/login.service";
@Injectable({ @Injectable({
providedIn: "root", providedIn: 'root',
}) })
export class DatabaseService { export class DatabaseService {
private baseUrl = environment.apiBaseUrl; private baseUrl = environment.apiBaseUrl;
constructor(private http: HttpClient, private userService: LoginService) {} constructor(private http: HttpClient) {}
getMeterData(): Observable<MeterData[]> { getMeterData(): Observable<MeterData[]> {
const url = `${this.baseUrl}/meter-data`; const url = `${this.baseUrl}/meter-data`;
let jwtToken: String = this.userService.getUserSecurityToken(), return this.http.get<MeterData[]>(url).pipe(catchError(this.handleError));
headers: HttpHeaders = new HttpHeaders({
authorization: "bearer " + jwtToken,
}),
options = { headers: headers };
return this.http
.get<MeterData[]>(url, options)
.pipe(catchError(this.handleError));
} }
getMeterDataByType(usageType: string): Observable<MeterData[]> { getMeterDataByType(usageType: string): Observable<MeterData[]> {
@@ -53,7 +45,7 @@ export class DatabaseService {
if (error.error instanceof ErrorEvent) { if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly. // 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 { } else {
// The backend returned an unsuccessful response code. // The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong. // The response body may contain clues as to what went wrong.