Add guard routing

hbweb · hbweb · commit 245198dedeb9 · 2023-09-27T15:08:59.000+07:00
diff --git a/src/app/topics/02-advanced-component/advanced-component.module.ts b/src/app/topics/02-advanced-component/advanced-component.module.ts
@@ -4,6 +4,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { SharedComponentsModule } from 'src/app/shared/components/shared-components.module';
 import { AdvancedComponent } from './advanced.component';
 import { CustomTwoWayDataBindingComponent } from './custom-two-way-data-binding/custom-two-way-data-binding.component';
+import { FormsModule } from '@angular/forms';
 
 const routes: Routes = [
   {
@@ -17,6 +18,7 @@ const routes: Routes = [
   imports: [
     RouterModule.forChild(routes),
     CommonModule,
+    FormsModule,
     SharedComponentsModule
   ]
 })
diff --git a/src/app/topics/02-advanced-component/advanced.component.ts b/src/app/topics/02-advanced-component/advanced.component.ts
@@ -15,6 +15,6 @@ export class AdvancedComponent {
     {title: 'Sanitization of HTML content', url: ''},
   ];
 
-
   public message = "Hello from two way data binding";
+
 }
diff --git a/src/app/topics/08-advanced-routing/advanced-routing.component.html b/src/app/topics/08-advanced-routing/advanced-routing.component.html
@@ -6,7 +6,8 @@ <h1 class="mb-2 text-1xl font-bold text-gray-800 md:text-3xl">
 <div class="grid grid-cols-1 md:grid-cols-5 gap-6">
   <div class="col-span-2"><app-topic-card [topicCards]="topicCards"></app-topic-card></div>
   <div class="demo-content col-span-3 bg-slate-100 p-4 shadow-lg">
-
+    <!-- Child routing content to be injected -->
+      <router-outlet></router-outlet>
   </div>
 </div>
 
diff --git a/src/app/topics/08-advanced-routing/advanced-routing.module.ts b/src/app/topics/08-advanced-routing/advanced-routing.module.ts
@@ -4,20 +4,23 @@ import { RouterModule, Routes } from '@angular/router';
 import { SharedComponentsModule } from 'src/app/shared/components/shared-components.module';
 import { AdvancedRoutingComponent } from './advanced-routing.component';
 import { GuardComponent } from './components/guard/guard.component';
+import { PermissionsService, UserToken, canActivateUser } from './services/routing.service';
 
 const routes: Routes = [
   {
     path: '',
     component: AdvancedRoutingComponent,
     children: [{
       path: 'with-guard',
-      component: GuardComponent
+      component: GuardComponent,
+      canActivate: [canActivateUser]
     }]
   }
 ];
 
 @NgModule({
   declarations: [AdvancedRoutingComponent],
+  providers: [PermissionsService, UserToken],
   imports: [
     RouterModule.forChild(routes),
     CommonModule,
diff --git a/src/app/topics/08-advanced-routing/components/guard/guard.component.html b/src/app/topics/08-advanced-routing/components/guard/guard.component.html
@@ -1,4 +1,4 @@
-<h2 class="mb-2 text-1xl font-bold text-gray-800 md:text-3xl">
+<h2 class="mb-2 text-1xl font-bold text-gray-800 md:text-2xl">
   Component with guard
 </h2>
 <p class="pb-8">Congratulation! You are authorised!</p>
diff --git a/src/app/topics/08-advanced-routing/services/routing.service.ts b/src/app/topics/08-advanced-routing/services/routing.service.ts
@@ -0,0 +1,21 @@
+import { Injectable, inject } from "@angular/core";
+import { ActivatedRouteSnapshot, CanActivateFn, RouterStateSnapshot } from "@angular/router";
+
+@Injectable()
+export class UserToken {
+}
+
+@Injectable()
+export class PermissionsService {
+  canActivate(currentUser: UserToken, userId: string): boolean {
+    return true;
+  }
+  canMatch(currentUser: UserToken): boolean {
+    return true;
+  }
+}
+
+
+export const canActivateUser: CanActivateFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+  return inject(PermissionsService).canActivate(inject(UserToken), 'fakeUserId');
+};

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@ import { RouterModule, Routes } from '@angular/router';`
`4`	`4`	`import { SharedComponentsModule } from 'src/app/shared/components/shared-components.module';`
`5`	`5`	`import { AdvancedComponent } from './advanced.component';`
`6`	`6`	`import { CustomTwoWayDataBindingComponent } from './custom-two-way-data-binding/custom-two-way-data-binding.component';`
	`7`	`+import { FormsModule } from '@angular/forms';`
`7`	`8`
`8`	`9`	`const routes: Routes = [`
`9`	`10`	`{`
`@@ -17,6 +18,7 @@ const routes: Routes = [`
`17`	`18`	`imports: [`
`18`	`19`	`RouterModule.forChild(routes),`
`19`	`20`	`CommonModule,`
	`21`	`+ FormsModule,`
`20`	`22`	`SharedComponentsModule`
`21`	`23`	`]`
`22`	`24`	`})`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,6 @@ export class AdvancedComponent {`
`15`	`15`	`{title: 'Sanitization of HTML content', url: ''},`
`16`	`16`	`];`
`17`	`17`
`18`		`-`
`19`	`18`	`public message = "Hello from two way data binding";`
	`19`	`+`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<h2 class="mb-2 text-1xl font-bold text-gray-800 md:text-3xl">`
	`1`	`+<h2 class="mb-2 text-1xl font-bold text-gray-800 md:text-2xl">`
`2`	`2`	`Component with guard`
`3`	`3`	`</h2>`
`4`	`4`	`<p class="pb-8">Congratulation! You are authorised!</p>`