Revize 2c5da396

Re #8469 - Improvment security - implementace

• authGuard and roleGuard final version
  + usage of localStorage for fields
  + loading properties form cookies to state

src/app/administration/administration.module.ts

@@ +1 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AdministrationComponent } from './components/administration.component';
+import {NavBarModule} from '../shared/nav-bar/nav-bar.module';
+
+
+
+@NgModule({
+  declarations: [AdministrationComponent],
+  imports: [
+    CommonModule,
+    NavBarModule
+  ]
+})
+export class AdministrationModule { }

src/app/administration/components/administration.component.html

@@ +1 @@
+<app-nav-bar></app-nav-bar>
+
+<p>administration works!</p>

src/app/administration/components/administration.component.ts

@@ +1 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-administration',
+  templateUrl: './administration.component.html',
+  styleUrls: ['./administration.component.scss']
+})
+export class AdministrationComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/app-routing.module.ts

@@ -2 +2 @@
 import {RouterModule, Routes} from '@angular/router';
 import {LoginComponent} from './login/components/login.component';
 import {DashboardComponent} from './dashboard/components/dashboard.component';
+import {AuthGuard} from './auth/guards/auth.guard';
+import {RoleGuard} from './auth/guards/role.guard';
+import {AdministrationComponent} from './administration/components/administration.component';
 
 const routes: Routes = [
   {
-    // canActivate: [AuthGuard],
     path: '',
     redirectTo: 'login',
     pathMatch: 'full'
   }, {
-    // canActivate: [AuthGuard, RoleGuard],
+    canActivate: [AuthGuard],
     path: 'dashboard',
     component: DashboardComponent,
+    pathMatch: 'full'
+  },
+  {
+    canActivate: [AuthGuard, RoleGuard],
+    path: 'administration',
+    component: AdministrationComponent,
     pathMatch: 'full',
     data: {
-      expectedRole: ['ROLE_ADMIN']
+      expectedRole: ['1']
     }
   },{
     path: 'login',

src/app/app.module.ts

@@ -9 +9 @@
 import {AuthModule} from './auth/auth.module';
 import {LoginModule} from './login/login.module';
 import {DashboardModule} from './dashboard/dashboard.module';
+import {AdministrationModule} from './administration/administration.module';
 
 @NgModule({
   declarations: [
@@ -22 +23 @@
     NavBarModule,
     AuthModule,
     LoginModule,
-    DashboardModule
+    DashboardModule,
+    AdministrationModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/auth/guards/auth.guard.ts

@@ -22 +22 @@
     next: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
   ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
-    if (!this.authService.getIsLoggedIn()) {
+    if (!this.authService.getUser()) {
       this.router.navigate(['']);
     }
-    return this.authService.getIsLoggedIn();
+    return !!this.authService.getUser();
   }
 }

src/app/auth/guards/role.guard.ts

@@ -23 +23 @@
     state: RouterStateSnapshot
   ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
     const expectedRole: string[] = routeSnapshot.data.expectedRole;
-    if (expectedRole.map(x => this.authService.getUserRoles().some(userRole => userRole.group_name === x))) {
+    if (expectedRole.includes(this.authService.getUser().userInfo.rights.toString())) {
+      console.log('You have enough rights!');
      return true;
     }
+    console.log('You are not allowed to be here!');
     this.router.navigate(['']);
     return false;
   }

src/app/auth/interceptors/auth.interceptor.ts

@@ -8 +8 @@
 import {Observable, throwError, of} from 'rxjs';
 
 import {catchError} from 'rxjs/operators';
-import {UserState} from '../states/user.state';
+import {AuthService} from '../services/auth.service';
+import {CookieService} from 'ngx-cookie-service';
+import {GlobalVariable} from '../../globals';
 
 @Injectable()
 export class AuthInterceptor implements HttpInterceptor {
 
   constructor(
-    private userState: UserState
+    private authService: AuthService,
+    private cookieService: CookieService
   ) {
   }
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
 
-    if (!sessionStorage.getItem('sessionid') && !request.url.includes('ControllerServlet')) {
-       return of(null);
+    if (!this.cookieService.get(GlobalVariable.SESSION_ID) && !request.url.includes('ControllerServlet')) {
+      console.log('No sessionid!');
+      return of(null);
     }
 
     if (!request.url.includes('ControllerServlet')){
       request = request.clone({
         setParams: {
-          user: sessionStorage.getItem('userName')
+          user: localStorage.getItem(GlobalVariable.USER_NAME)
         }
       });
     }
 
+    console.log('Sending request!');
     return next.handle(request)
       .pipe(
         catchError(err => {
-          if ((err instanceof HttpErrorResponse && err.status === 504 || err.status === 502 || err.status === 0)) {
+          if ((err instanceof HttpErrorResponse && err.status === 504 || err.status === 502 || err.status === 0 || err.status === 500)) {
             return this.handleError(request, next);
           } else {
             return throwError(err);
@@ -45 +50 @@
   }
 
   handleError(request: HttpRequest<any>, next: HttpHandler) {
+    this.authService.doLogout();
     return of(null);
   }
 }

src/app/auth/models/user.ts

@@ +1 @@
+/* tslint:disable */
+/* eslint-disable */
+import {UserInfo} from '../../shared/api/endpoints/models/user-info';
+
+export interface User {
+  userInfo?: UserInfo;
+  isLoggedIn?: boolean;
+  userName?: string
+}

src/app/auth/services/auth.service.ts

@@ -1 +1 @@
 import {Injectable} from '@angular/core';
 import {HttpClient, HttpResponse} from '@angular/common/http';
-import {Observable, of, pipe} from 'rxjs';
+import {Observable, of} from 'rxjs';
 import {catchError, mapTo, tap} from 'rxjs/operators';
 import {Router} from '@angular/router';
 import {CookieService} from 'ngx-cookie-service';
 import {UserState} from '../states/user.state';
 import {LoginService} from '../../shared/api/endpoints/services/login.service';
 import {UserInfo} from '../../shared/api/endpoints/models/user-info';
-import {Group} from '../../shared/api/endpoints/models/group';
+import {User} from '../models/user';
+import {GlobalVariable} from '../../globals';
 
 @Injectable({
   providedIn: 'root'
@@ -23 +24 @@
   ) {
   }
 
+  setFromCookie() {
+    const user: User = {
+      userInfo: {
+        rights: JSON.parse(localStorage.getItem(GlobalVariable.RIGHTS)),
+        language: this.cookieService.get(GlobalVariable.LANGUAGE),
+        audio: JSON.parse(this.cookieService.get(GlobalVariable.AUDIO)),
+        sessionid: this.cookieService.get(GlobalVariable.SESSION_ID)
+      },
+      userName: localStorage.getItem(GlobalVariable.USER_NAME),
+      isLoggedIn: true
+    }
+    this.userState.setUser(user);
+  }
+
+  getUser() {
+    console.log('Auth Service', this.userState.getUser());
+    if (!this.userState.getUser() && this.cookieService.get(GlobalVariable.SESSION_ID)) {
+      console.log('Session in cookie!');
+      this.setFromCookie();
+    }
+    return this.userState.getUser();
+  }
+
+  getUserState(): Observable<User> {
+    return this.userState.getUser$();
+  }
+
   doLogin(loginInput): Observable<boolean> {
     return this.loginService.login$Response(loginInput)
       .pipe(
-        tap((userInfo: HttpResponse<UserInfo>) => this.setUserFromResponse(userInfo.body, loginInput)),
+        tap((userInfo: HttpResponse<UserInfo>) => this.setUserFromResponse(userInfo.body, loginInput.username)),
         mapTo(true),
         catchError(() => {
           return of<boolean>(false);
@@ -34 +62 @@
       );
   }
 
-  getUserState(): Observable<UserInfo> {
-    return this.userState.getUser$();
-  }
-
-  getIsLoggedIn(): boolean {
-    return this.userState.getLoggedIn();
-  }
-
-  setUserFromResponse(userInfo: UserInfo, loginInput): UserInfo {
-    this.userState.setUser(userInfo);
-    this.userState.setLoggedIn(true);
-    sessionStorage.setItem('userName', loginInput.username)
-    sessionStorage.setItem('sessionid', userInfo.sessionid)
-    sessionStorage.setItem('language', userInfo.language)
-    sessionStorage.setItem('audio', String(userInfo.audio))
-    this.cookieService.set('userName', loginInput.username)
+  setUserFromResponse(userInfo: UserInfo, username): UserInfo {
+    console.log('Setting user from login!');
+    this.userState.setUser({
+      userInfo,
+      isLoggedIn: true,
+      userName: username
+    });
+    this.setSessionStorage(userInfo, username);
     return userInfo;
   }
 
   doLogout() {
+    this.userState.setUser(null);
     this.cookieService.deleteAll();
+    localStorage.clear();
+    this.router.navigate(['/login']);
   }
 
-  getUserRoles(): Group[] {
-    return this.userState.getUserGroups();
+  setSessionStorage(userInfo: UserInfo, username) {
+    localStorage.setItem(GlobalVariable.USER_NAME, username)
+    // TODO - get rights from response
+    // localStorage.setItem('rights', userInfo.rights.toString());
+    localStorage.setItem(GlobalVariable.RIGHTS, '1');
   }
 }

src/app/auth/states/user.state.ts

@@ -1 +1 @@
 import {Injectable} from '@angular/core';
 import {BehaviorSubject, Observable} from 'rxjs';
-import {Group, UserInfo} from '../../shared/api/endpoints/models';
+import {User} from '../models/user';
 
 @Injectable({
   providedIn: 'root'
 })
 export class UserState {
-  private userState$: BehaviorSubject<UserInfo> = new BehaviorSubject<UserInfo>(null);
-  private isLoggedAdmin$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-  private isLoggedIn$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-  private userGroups$: BehaviorSubject<Group[]> = new BehaviorSubject<Group[]>(null);
+  private userState$: BehaviorSubject<User> = new BehaviorSubject<User>(null);
 
-  constructor() {
-  }
+  constructor() {}
 
-  setUser(user: UserInfo): void {
+  setUser(user: User): void {
     this.userState$.next(user);
   }
 
-  getUser(): UserInfo {
-    return this.userState$.getValue();
-  }
-
-  getUser$(refresh: boolean = false): Observable<UserInfo> {
-    /*if (this.userState$.getValue() === null || refresh){
-      this.accountService.getAccountUsingGET('body')
-        .subscribe(res => this.setUser(res));
-    }*/
-    return this.userState$.asObservable();
-  }
-
-  setLoggedAdmin(adminLogged: boolean): void {
-    this.isLoggedAdmin$.next(adminLogged);
-  }
-
-  getLoggedAdmin(): boolean {
-    return this.isLoggedAdmin$.getValue();
+  setLoggedIn(loggedIn: boolean) {
+    this.userState$.next({...this.userState$.getValue(), isLoggedIn: loggedIn})
   }
 
-  setLoggedIn(loggedIn: boolean): void {
-    this.isLoggedIn$.next(loggedIn);
+  getUser(): User {
+    return this.userState$.getValue();
   }
 
-  getLoggedIn$(): Observable<boolean> {
-    return this.isLoggedIn$.asObservable();
+  getUser$(refresh: boolean = false): Observable<User> {
+    return this.userState$.asObservable();
   }
 
   getLoggedIn(): boolean {
-    return this.isLoggedIn$.getValue();
-  }
-
-  setUserGroups(userGroups: Group[]): void {
-    this.userGroups$.next(userGroups);
-  }
-
-  getUserGroups$(): Observable<Group[]> {
-    return this.userGroups$.asObservable();
-  }
-
-  getUserGroups(): Group[] {
-    return this.userGroups$.getValue();
+    return this.userState$.getValue().isLoggedIn;
   }
 }

src/app/dashboard/components/dashboard.component.ts

@@ -29 +29 @@
   }
 
   getGroups() {
+    console.log('Get Groups');
     this.groupService.getGroups({Operation: 'GetGroups'}).pipe(
       tap(data => this.groups = data)
     ).toPromise();

src/app/globals.ts

@@ +1 @@
+export const GlobalVariable = Object.freeze({
+  SESSION_ID: 'sessionid',
+  USER_NAME: 'userName',
+  RIGHTS: 'rights',
+  LANGUAGE: 'language',
+  AUDIO: 'audio'
+});

src/app/login/components/login.component.ts

@@ -4 +4 @@
 import {of, Subscription} from 'rxjs';
 import {AuthService} from '../../auth/services/auth.service';
 import {Router} from '@angular/router';
-import {UserState} from '../../auth/states/user.state';
 
 @Component({
   selector: 'app-login',
@@ -19 +18 @@
   constructor(
     private formBuilder: FormBuilder,
     private authService: AuthService,
-    private router: Router,
-    private userState: UserState
+    private router: Router
   ) {
   }
 
@@ -29 +27 @@
       username: ['', [Validators.required]],
       password: ['', Validators.required]
     });
+    this.userRedirect();
   }
 
   doLogin(): void {
@@ -39 +38 @@
       })
         .pipe(
           switchMap(res => {
+            console.log(res);
             if (res) {
+              console.log('Login getUserState');
               return this.authService.getUserState();
             } else {
               return of(false);
@@ -47 +48 @@
           })
         ).subscribe(
           res => {
+            console.log(res);
             if (res) {
-              console.log(res);
-              this.userState.setLoggedIn(true);
               this.subscription[2].unsubscribe();
               this.router.navigate(['/dashboard'])
             }
@@ -57 +57 @@
         );
     }
   }
+
+  userRedirect(): void {
+    console.log('Login redirect');
+    if (this.authService.getUser()){
+      console.log('Redirect to dashboard!');
+      this.router.navigate(['/dashboard']);
+    }
+  }
 }

src/app/shared/nav-bar/components/nav-bar.component.html

@@ -20 +20 @@
     <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
       <ul class="navbar-nav ms-auto">
         <li class="nav-item">
-          <a class="nav-link" href="#">ASWI</a>
+          <a class="nav-link" href="#">{{loggedUser?.userName.toUpperCase()}}</a>
         </li>
         <li class="divider-vertical"></li>
         <li class="nav-item">

src/app/shared/nav-bar/components/nav-bar.component.ts

@@ -1 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {AuthService} from '../../../auth/services/auth.service';
-import {Router} from '@angular/router';
-import {UserState} from '../../../auth/states/user.state';
+import {User} from '../../../auth/models/user';
+import {Subscription} from 'rxjs';
 
 @Component({
   selector: 'app-nav-bar',
   templateUrl: './nav-bar.component.html',
   styleUrls: ['./nav-bar.component.scss']
 })
-export class NavBarComponent implements OnInit {
+export class NavBarComponent implements OnInit, OnDestroy {
 
+  loggedUser: User;
+  subscription: Subscription[] = [];
   constructor(
-    private authService: AuthService,
-    private router: Router,
-    private userState: UserState
+    private authService: AuthService
   ) {
   }
 
   ngOnInit(): void {
+    this.setUser();
+  }
+
+  setUser(){
+    this.authService.getUserState().subscribe(res => {
+      if(res){
+        this.loggedUser = res;
+      }
+    });
   }
 
   logOut(): void {
-    this.userState.setLoggedIn(false);
     this.authService.doLogout();
   }
+
+  ngOnDestroy(): void {
+    this.subscription.forEach(subs => subs.unsubscribe());
+  }
 }

src/app/shared/services/logger.service.ts

@@ +1 @@
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoggerService {
+
+  isLoggingEnabled = true;
+
+  consoleLog(args){
+    console.log(args);
+  }
+}