AuthGuard implemented to protect route against unauthenticated requests.

badripaudel77 · badripaudel77 · commit a4ac072682a7 · 2022-12-17T00:25:10.000+05:45
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -6,12 +6,14 @@ import {NoRecipeSelectedComponent} from "./recipes/no-recipe-selected/no-recipe-
 import {RecipesDetailComponent} from "./recipes/recipes-detail/recipes-detail.component";
 import {RecipeEditComponent} from "./recipes/recipe-edit/recipe-edit.component";
 import {AuthenticationComponent} from "./authentication/authentication.component";
+import {AuthGuard} from "./guards/auth.guard";
 
 const routes: Routes = [
   { path: '', redirectTo: '/recipes', pathMatch: "full" },
   {
     path: 'recipes',
     component: RecipesComponent,
+    canActivate: [AuthGuard],
     children: [
       { path: '', component: NoRecipeSelectedComponent }, // /recipes/, /recipes
       { path: 'add', component: RecipeEditComponent }, // /recipes/add
diff --git a/src/app/guards/auth.guard.ts b/src/app/guards/auth.guard.ts
@@ -0,0 +1,30 @@
+import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree} from "@angular/router";
+import {map, Observable, take} from "rxjs";
+import {AuthenticationService} from "../services/authentication.service";
+import {Injectable} from "@angular/core";
+
+/**
+* Angular guard runs before running the code
+* Useful to check if route is accessible or not
+* This is also a "service"
+*/
+
+@Injectable({ providedIn: 'root' })
+export class AuthGuard implements CanActivate {
+    constructor(private authenticationService: AuthenticationService, private router: Router) {
+
+    }
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+        // check if user is logged in or not
+        // check if user is authorized or not
+        // can be added to app-routing.module file with needed route.
+        // listen for latest user value only and unsubscribe.
+        return this.authenticationService.userSubject.pipe(take(1),map(user => {
+            if(!user) {
+                // this.router.navigate(['/auth']);
+                return this.router.createUrlTree(['/auth']);
+            }
+            return true;
+        }));
+    }
+}
