feat(challenge 6): implement role-based access control with directives and guards

Author: truonghungit

apps/angular/6-structural-directive/src/app/button.component.ts

@@ -7,7 +7,8 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
     <ng-content />
   `,
   host: {
-    class: 'border border-blue-700 bg-blue-400 p-2 rounded-sm text-white',
+    class:
+      'rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 cursor-pointer',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

apps/angular/6-structural-directive/src/app/dashboard/client.component.ts

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { ButtonComponent } from '../button.component';
+
+@Component({
+  selector: 'app-client-dashboard',
+  imports: [RouterLink, ButtonComponent],
+  template: `
+    <p>dashboard for Client works!</p>
+    <button app-button routerLink="/">Logout</button>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ClientDashboardComponent {}

apps/angular/6-structural-directive/src/app/dashboard/manager.component.ts

@@ -1,8 +1,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { ButtonComponent } from '../button.component';
 
 @Component({
   selector: 'app-dashboard',
-  imports: [],
+  imports: [RouterLink, ButtonComponent],
   template: `
     <p>dashboard for Manager works!</p>
     <button app-button routerLink="/">Logout</button>

apps/angular/6-structural-directive/src/app/dashboard/reader.component.ts

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { ButtonComponent } from '../button.component';
+
+@Component({
+  selector: 'app-reader-dashboard',
+  imports: [RouterLink, ButtonComponent],
+  template: `
+    <p>dashboard for Reader works!</p>
+    <button app-button routerLink="/">Logout</button>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ReaderDashboardComponent {}

apps/angular/6-structural-directive/src/app/dashboard/writer.component.ts

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { ButtonComponent } from '../button.component';
+
+@Component({
+  selector: 'app-writer-dashboard',
+  imports: [RouterLink, ButtonComponent],
+  template: `
+    <p>dashboard for Writer works!</p>
+    <button app-button routerLink="/">Logout</button>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WriterDashboardComponent {}

apps/angular/6-structural-directive/src/app/has-role.directive.ts

@@ -0,0 +1,70 @@
+import {
+  Directive,
+  effect,
+  inject,
+  input,
+  TemplateRef,
+  ViewContainerRef,
+} from '@angular/core';
+import { Role } from './user.model';
+import { UserStore } from './user.store';
+
+@Directive({ selector: '[hasRole]' })
+export class HasRoleDirective {
+  private readonly templateRef = inject(TemplateRef<unknown>);
+  private readonly vcRef = inject(ViewContainerRef);
+  private readonly userStore = inject(UserStore);
+
+  hasRole = input<Role[], Role | Role[]>([], {
+    alias: 'hasRole',
+    transform: (v: Role | Role[]) => {
+      return typeof v === 'string' ? [v] : v;
+    },
+  });
+
+  effect = effect(() => {
+    const user = this.userStore.getUser();
+    const userRoles = user()?.roles ?? [];
+    const requiredRoles = this.hasRole() ?? [];
+
+    this.updateView(userRoles, requiredRoles);
+  });
+
+  private updateView(userRoles: Role[], requiredRoles: Role[]) {
+    this.vcRef.clear();
+
+    if (requiredRoles.length === 0) {
+      this.vcRef.createEmbeddedView(this.templateRef);
+      return;
+    }
+
+    const canAccess = requiredRoles.some((role) =>
+      userRoles.includes(role as any),
+    );
+
+    if (canAccess) {
+      this.vcRef.createEmbeddedView(this.templateRef);
+    }
+  }
+}
+
+@Directive({ selector: '[isSuperAdmin]' })
+export class IsSuperAdminDirective {
+  private readonly templateRef = inject(TemplateRef<unknown>);
+  private readonly vcRef = inject(ViewContainerRef);
+  private readonly userStore = inject(UserStore);
+
+  effect = effect(() => {
+    const user = this.userStore.getUser();
+
+    this.updateView(user()?.isAdmin);
+  });
+
+  private updateView(isAdminUser: boolean | undefined) {
+    this.vcRef.clear();
+
+    if (isAdminUser) {
+      this.vcRef.createEmbeddedView(this.templateRef);
+    }
+  }
+}

apps/angular/6-structural-directive/src/app/has-role.guard.ts

@@ -0,0 +1,18 @@
+import { inject } from '@angular/core';
+import { CanMatchFn } from '@angular/router';
+import { UserRoleService } from './user-role.service';
+import { Role } from './user.model';
+
+export const isAdminGuard: CanMatchFn = () => {
+  const userRoleService = inject(UserRoleService);
+
+  return userRoleService.isSuperAdminUser();
+};
+
+export const hasRoleGuard = (roles: Role[]): CanMatchFn => {
+  return () => {
+    const userRoleService = inject(UserRoleService);
+
+    return userRoleService.hasAnyRole(roles);
+  };
+};

apps/angular/6-structural-directive/src/app/information.component.ts

@@ -1,22 +1,19 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { UserStore } from './user.store';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { HasRoleDirective, IsSuperAdminDirective } from './has-role.directive';
 
 @Component({
   selector: 'app-information',
   template: `
     <h2 class="mt-10 text-xl">Information Panel</h2>
     <!-- admin can see everything -->
-    <div>visible only for super admin</div>
-    <div>visible if manager</div>
-    <div>visible if manager and/or reader</div>
-    <div>visible if manager and/or writer</div>
-    <div>visible if client</div>
+    <div *isSuperAdmin>visible only for super admin</div>
+    <div *hasRole="'MANAGER'">visible if manager</div>
+    <div *hasRole="['MANAGER', 'READER']">visible if manager and/or reader</div>
+    <div *hasRole="['MANAGER', 'WRITER']">visible if manager and/or writer</div>
+    <div *hasRole="'CLIENT'">visible if client</div>
     <div>visible for everyone</div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [HasRoleDirective, IsSuperAdminDirective],
 })
-export class InformationComponent {
-  private readonly userStore = inject(UserStore);
-
-  user$ = this.userStore.user$;
-}
+export class InformationComponent {}

apps/angular/6-structural-directive/src/app/login.component.ts

@@ -2,15 +2,7 @@ import { Component, inject } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { ButtonComponent } from './button.component';
 import { InformationComponent } from './information.component';
-import {
-  admin,
-  client,
-  everyone,
-  manager,
-  reader,
-  readerAndWriter,
-  writer,
-} from './user.model';
+import { USERS_MAP, UserType } from './user.model';
 import { UserStore } from './user.store';
 
 @Component({
@@ -19,13 +11,15 @@ import { UserStore } from './user.store';
   template: `
     <header class="flex items-center gap-3">
       Log as :
-      <button app-button (click)="admin()">Admin</button>
-      <button app-button (click)="manager()">Manager</button>
-      <button app-button (click)="reader()">Reader</button>
-      <button app-button (click)="writer()">Writer</button>
-      <button app-button (click)="readerWriter()">Reader and Writer</button>
-      <button app-button (click)="client()">Client</button>
-      <button app-button (click)="everyone()">Everyone</button>
+      <button app-button (click)="loginAs('admin')">Admin</button>
+      <button app-button (click)="loginAs('manager')">Manager</button>
+      <button app-button (click)="loginAs('reader')">Reader</button>
+      <button app-button (click)="loginAs('writer')">Writer</button>
+      <button app-button (click)="loginAs('readerAndWriter')">
+        Reader and Writer
+      </button>
+      <button app-button (click)="loginAs('client')">Client</button>
+      <button app-button (click)="loginAs('everyone')">Everyone</button>
     </header>
 
     <app-information />
@@ -38,25 +32,8 @@ import { UserStore } from './user.store';
 export class LoginComponent {
   private readonly userStore = inject(UserStore);
 
-  admin() {
-    this.userStore.add(admin);
-  }
-  manager() {
-    this.userStore.add(manager);
-  }
-  reader() {
-    this.userStore.add(reader);
-  }
-  writer() {
-    this.userStore.add(writer);
-  }
-  readerWriter() {
-    this.userStore.add(readerAndWriter);
-  }
-  client() {
-    this.userStore.add(client);
-  }
-  everyone() {
-    this.userStore.add(everyone);
+  loginAs(userType: UserType) {
+    const user = USERS_MAP[userType];
+    this.userStore.setUser(user);
   }
 }

apps/angular/6-structural-directive/src/app/routes.ts

@@ -1,3 +1,5 @@
+import { hasRoleGuard, isAdminGuard } from './has-role.guard';
+
 export const APP_ROUTES = [
   {
     path: '',
@@ -6,9 +8,45 @@ export const APP_ROUTES = [
   },
   {
     path: 'enter',
+    canMatch: [isAdminGuard],
     loadComponent: () =>
       import('./dashboard/admin.component').then(
         (m) => m.AdminDashboardComponent,
       ),
   },
+  {
+    path: 'enter',
+    canMatch: [hasRoleGuard(['MANAGER'])],
+    data: { role: 'MANAGER' },
+    loadComponent: () =>
+      import('./dashboard/manager.component').then(
+        (m) => m.ManagerDashboardComponent,
+      ),
+  },
+  {
+    path: 'enter',
+    canMatch: [hasRoleGuard(['READER'])],
+    data: { role: 'READER' },
+    loadComponent: () =>
+      import('./dashboard/reader.component').then(
+        (m) => m.ReaderDashboardComponent,
+      ),
+  },
+  {
+    path: 'enter',
+    canMatch: [hasRoleGuard(['WRITER'])],
+    data: { role: 'WRITER' },
+    loadComponent: () =>
+      import('./dashboard/writer.component').then(
+        (m) => m.WriterDashboardComponent,
+      ),
+  },
+  {
+    path: 'enter',
+    canMatch: [hasRoleGuard(['CLIENT'])],
+    loadComponent: () =>
+      import('./dashboard/client.component').then(
+        (m) => m.ClientDashboardComponent,
+      ),
+  },
 ];