add admin-guard

Author: SergeyPirogov

src/app/app.module.ts

@@ -23,6 +23,7 @@ import { JwtInterceptor } from './jwt.interceptor';
 import { UserManagementComponent } from './user-management/user-management.component';
 import { AddUserComponent } from './add-user/add-user.component';
 import { PatronsListComponent } from './patrons-list/patrons-list.component';
+import { AuthErrorComponent } from './auth-error/auth-error.component';
 
 
 @NgModule({
@@ -38,7 +39,8 @@ import { PatronsListComponent } from './patrons-list/patrons-list.component';
     LinkThemesComponent,
     UserManagementComponent,
     AddUserComponent,
-    PatronsListComponent
+    PatronsListComponent,
+    AuthErrorComponent
   ],
   imports: [
     BrowserModule,

src/app/app.routing.ts

@@ -10,17 +10,21 @@ import { LoginComponent } from './login/login.component';
 import { LinkThemesComponent } from './link-themes/link-themes.component';
 import { UserManagementComponent } from './user-management/user-management.component';
 import { AddUserComponent } from './add-user/add-user.component';
-import {PatronsListComponent} from "./patrons-list/patrons-list.component";
+import { PatronsListComponent } from "./patrons-list/patrons-list.component";
+import { AdminGuardService as AdminGuard } from './service/admin-guard.service';
+import { AuthErrorComponent } from './auth-error/auth-error.component';
+
 
 const routes: Routes = [
-  { path: "add-user", component: AddUserComponent, canActivate: [AuthGuard] },
+  { path: "add-user", component: AddUserComponent, canActivate: [AuthGuard, AdminGuard] },
+  { path: "auth-error", component: AuthErrorComponent, canActivate: [AuthGuard] }
   { path: 'export/:id', component: ExportComponent, canActivate: [AuthGuard] },
-  { path: 'user-management', component: UserManagementComponent, canActivate: [AuthGuard] },
+  { path: 'user-management', component: UserManagementComponent, canActivate: [AuthGuard, AdminGuard] },
   { path: "add-theme", component: ProposeThemeComponent },
   { path: 'list', component: EpisodeListComponent, canActivate: [AuthGuard] },
-  { path: 'link-themes/:id', component: LinkThemesComponent, canActivate: [AuthGuard] },
+  { path: 'link-themes/:id', component: LinkThemesComponent, canActivate: [AuthGuard, AdminGuard] },
   { path: 'episode-details/:id', component: EpisodeDetailsComponent, canActivate: [AuthGuard] },
-  { path: 'patrons-list', component: PatronsListComponent, canActivate: [AuthGuard] },
+  { path: 'patrons-list', component: PatronsListComponent, canActivate: [AuthGuard, AdminGuard] },
   { path: '**', component: LoginComponent }
 ]
 

src/app/auth-error/auth-error.component.css

@@ -0,0 +1,7 @@
+<div class="container">
+  <div class="row align-items-center">
+    <div class="col">
+        You are not allowed to access this resource! Admin role required!
+    </div>
+  </div>
+</div>

src/app/auth-error/auth-error.component.html

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-auth-error',
+  templateUrl: './auth-error.component.html',
+  styleUrls: ['./auth-error.component.css']
+})
+export class AuthErrorComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/auth-error/auth-error.component.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, Router } from '@angular/router';
+import { LoggedUserService } from './logged-user.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AdminGuardService implements CanActivate{
+
+  constructor(private sessionUserService: LoggedUserService,
+              private router: Router) { }
+
+  canActivate(): boolean {
+    const user = this.sessionUserService.getSessionUser();
+    if(!user.isAdmin){
+      this.router.navigate(['auth-error']);
+      return false;
+    }
+
+    return true;
+  }
+
+}

src/app/service/admin-guard.service.ts

@@ -3,16 +3,13 @@
     <div class="navbar-expand mr-auto">
       <div class="navbar-nav">
           <button *ngIf="isLogged()" type="button" class="btn btn-outline-light mx-2" (click)="goHome()">Home</button>
-          <button *ngIf="currentUser.isAdmin" type="button" class="btn btn-outline-light mx-2" (click)="patronsList()">Patrons</button>
+          <button *ngIf="isLogged() && isAdmin()" type="button" class="btn btn-outline-light mx-2" (click)="patronsList()">Patrons</button>
       </div>
     </div>
     <div class="navbar-expand ml-auto navbar-nav">
       <div class="navbar-nav">
-        <button *ngIf="isLogged()" type="button" class="btn btn-outline-light mx-2" (click)="logout()">Logout</button>
         <a *ngIf="isLogged()" class="nav-item nav-link">{{ getCurrentUserName() }}</a>
-        <a class="nav-item nav-link" href="https://github.com/beeman" target="_blank">
-          <i class="fa fa-github"></i>
-        </a>
+        <button *ngIf="isLogged()" type="button" class="btn btn-outline-light mx-2" (click)="logout()">Logout</button>
       </div>
     </div>
   </nav>

src/app/ui/header/header.component.html

@@ -38,6 +38,10 @@ export class HeaderComponent implements OnInit {
     return this.authSerice.isAuthenticated()
   }
 
+  isAdmin(): boolean{
+    return this.sessionUserService.getSessionUser().isAdmin
+  }
+
   getCurrentUserName(){
     return this.sessionUserService.getSessionUser().username
   }