Refactored the role-guard-service to take in an Array of roles

Did this so as to allow both teachers and admins to have access to a navbar component without letting students access it. The alternative is to embed the component in both the teacher and admin modules but this approach seems preferable
phonlab-tcd · Jul 25, 2024 · 8baffe0 · 8baffe0
1 parent 968d632
commit 8baffe0
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 7 deletions.
diff --git a/ngapp/src/app/app-routing.module.ts b/ngapp/src/app/app-routing.module.ts
@@ -26,20 +26,20 @@ const routes: Routes = [
   { path: 'stats-dashboard/:id', loadComponent: () => import('./stats-dashboard/stats-dashboard.component').then(m => m.StatsDashboardComponent)},
   {
     path: 'student',
-    data: { expectedRole: 'STUDENT' },
+    data: { expectedRoles: ['STUDENT'] },
     canActivate: [RoleGuardService],
     loadChildren: () => import('./student/student.module').then(m=>m.StudentModule)
   },
   {
     path: 'teacher',
-    data: { expectedRole: 'TEACHER' },
+    data: { expectedRoles: ['TEACHER'] },
     canActivate: [RoleGuardService],
     loadChildren: () => import('./teacher/teacher.module').then(m=>m.TeacherModule)
   },
   {
     path: 'admin',
     canActivate: [RoleGuardService],
-    data: { expectedRole: 'ADMIN' },
+    data: { expectedRoles: ['ADMIN'] },
     loadChildren: () => import('./admin/admin.module').then(m=>m.AdminModule)
   },
 ];

diff --git a/ngapp/src/app/core/services/role-guard.service.ts b/ngapp/src/app/core/services/role-guard.service.ts
@@ -11,7 +11,7 @@ export class RoleGuardService implements CanActivate {
   constructor(public auth: AuthenticationService, public router: Router) { }
 
   canActivate(route: ActivatedRouteSnapshot): boolean {
-      const expectedRole = route.data['expectedRole'];
+      const expectedRoles = route.data['expectedRoles'];
       const token = localStorage.getItem('scealai-token');
 
       if (!token) {
@@ -21,7 +21,8 @@ export class RoleGuardService implements CanActivate {
 
       const tokenPayload = decode(token);
 
-      if (!this.auth.isLoggedIn() || tokenPayload.role !== expectedRole) {
+      //if (!this.auth.isLoggedIn() || tokenPayload.role !== expectedRole) {
+      if (!this.auth.isLoggedIn() || !expectedRoles.includes(tokenPayload.role)) {
         this.router.navigateByUrl('/landing');
         return false;
       }

diff --git a/ngapp/src/app/nav-bar/nav-bar-routing.module.ts b/ngapp/src/app/nav-bar/nav-bar-routing.module.ts
@@ -12,19 +12,26 @@ import { ResourcesComponent } from './resources/resources.component';
 import { DigitalReaderComponent } from './digital-reader/digital-reader.component';
 import { AboutTaidhginComponent } from './about-taidhgin/about-taidhgin.component';
 import { FiosComponent } from './fios/fios.component';
+import { RoleGuardService } from 'app/core/services/role-guard.service';
 
 const routes: Routes = [
   { path: 'about', component: AboutComponent},
   { path: 'fios', component: FiosComponent},
   { path: 'about-lara', component: AboutLaraComponent },
   { path: 'technology', component: TechnologyComponent},
   { path: 'resources', component: ResourcesComponent},
-  { path: 'digital-reader', component: DigitalReaderComponent},
+  //{ path: 'digital-reader', component: DigitalReaderComponent},
   { path: 'team', component: TeamComponent},
   { path: 'sponsors', component: SponsorsComponent},
   { path: 'user-guides', component: UserGuidesComponent},
   { path: 'report-an-issue', component: ReportAnIssueComponent},
   { path: 'about-taidhgin', component: AboutTaidhginComponent },
+  {
+    path: 'dr-story-create',
+    data: { expectedRoles: ['TEACHER', 'ADMIN'] },
+    canActivate: [RoleGuardService],
+    component: DigitalReaderComponent
+  },
 ];
 
 @NgModule({

diff --git a/ngapp/src/app/nav-bar/nav-bar/nav-bar.component.html b/ngapp/src/app/nav-bar/nav-bar/nav-bar.component.html
@@ -45,7 +45,9 @@
     <mat-menu #LARA="matMenu">
       <a mat-menu-item class="dropdownMenuItem" routerLink="/about-lara"> {{ ts.l.what_is_LARA }}</a >
       <a mat-menu-item class="dropdownMenuItem" routerLink="/resources">{{ ts.l.irish_stories }}</a>
-      <a mat-menu-item class="dropdownMenuItem" routerLink="/digital-reader">{{ ts.l.digital_reader }}</a>
+      <a
+      *ngIf="auth.isLoggedIn() && (auth.getUserDetails()?.role === 'TEACHER' || auth.getUserDetails()?.role === 'ADMIN')"
+      mat-menu-item class="dropdownMenuItem" routerLink="/dr-story-create">{{ ts.l.dr_story_create }}</a>
     </mat-menu>
 
     <!-- Cen Scéal dropdown menu-->

diff --git a/ngapp/src/app/translation.ts b/ngapp/src/app/translation.ts
@@ -101,6 +101,9 @@ const translations = {
   irish_stories: {
     ga: 'Scéalta',
     en: 'Irish Stories' },
+  dr_story_create: {
+    ga: 'Cruthaigh scéal léitheora digitigh',
+    en: 'Create a digital reader story' },
   digital_reader: {
     ga: 'Léitheoir Scéalta Digiteacha',
     en: 'Digital Story Reader' },