Let’s say you want to add a Guard so that you force people to be logged in at certain pages or routes rather. I am using Angular 12 but you can do this is lower versions on Angular too!<\/p>\n\n\n\n
Let us create a folder called services if you haven’t one already, and in it create a file you call guard.service.ts<\/strong>.<\/p>\n\n\n\n Inside it, set up your service like this:<\/p>\n\n\n\nimport { Injectable } from "@angular\/core";\nimport { ActivatedRoute, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular\/router";\nimport { Observable } from "rxjs";\nimport { tap, map } from "rxjs\/operators";\nimport { AngularFireAuth } from '@angular\/fire\/auth';\n\n@Injectable()\nexport class guardService {\n constructor(\n private route: ActivatedRoute,\n private router: Router,\n public af: AngularFireAuth) { }\n canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {\n return this.af.authState.pipe(\n map(auth => {\n if (auth === null || auth === undefined) {\n this.router.navigate(['\/login']); \/\/Redirect if not authenticated\n return false;\n } else {\n return true;\n }\n })\n );\n }\n}\n<\/pre><\/div>\n\n\n