3 implement canactivate guard

src/app/app-routing.module.ts

@@ -1,11 +1,14 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from './auth/auth.guard';
 import { HomeComponent } from './home/home.component';
 import { NonAuthenticatedComponent } from './non-authenticated/non-authenticated.component';
+import { UsersComponent } from './users/users.component';
 
 const routes: Routes = [
   { path: '', pathMatch: 'full', redirectTo: 'home' },
   { path: 'home', component: HomeComponent },
+  { path: 'users', canActivate: [AuthGuard], component: UsersComponent },
   { path: 'non-auth', component: NonAuthenticatedComponent },
 ];
 

src/app/app.component.html

@@ -2,7 +2,7 @@
   <span>{{ title }}</span>
   <span class="example-spacer"> </span>
   <button mat-button routerLink="home">Home</button>
-  <button mat-button routerLink="users">CanActivate</button>
+  <button mat-button routerLink="users">Users</button>
   <button
     mat-button
     (click)="onLogin()"

src/app/app.module.ts

@@ -5,11 +5,17 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AngularMaterialModule } from './angular-material/angular-material.module';
+import { UsersComponent } from './users/users.component';
 import { NonAuthenticatedComponent } from './non-authenticated/non-authenticated.component';
 import { HomeComponent } from './home/home.component';
 
 @NgModule({
-  declarations: [AppComponent, NonAuthenticatedComponent, HomeComponent],
+  declarations: [
+    AppComponent,
+    UsersComponent,
+    NonAuthenticatedComponent,
+    HomeComponent,
+  ],
   imports: [
     AngularMaterialModule,
     AppRoutingModule,

src/app/auth/auth.guard.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuard } from './auth.guard';
+
+describe('AuthGuard', () => {
+  let guard: AuthGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(AuthGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

src/app/auth/auth.guard.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, Router, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { AuthService } from './auth.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthGuard implements CanActivate {
+  constructor(
+    private readonly authService: AuthService,
+    private readonly router: Router
+  ) {}
+
+  canActivate():
+    | Observable<boolean | UrlTree>
+    | Promise<boolean | UrlTree>
+    | boolean
+    | UrlTree {
+    return this.authService.isLoggedIn$.pipe(
+      tap((isLoggedIn) =>
+        isLoggedIn ? true : this.router.navigate(['non-auth'])
+      )
+    );
+  }
+}

src/app/non-authenticated/non-authenticated.component.ts

@@ -3,7 +3,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
 @Component({
   selector: 'app-non-authenticated',
   template: `
-    <mat-card>You are not Authenticated to view that Route</mat-card>
+    <mat-card>You are not Authenticated to view this Route</mat-card>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/users/users.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsersComponent } from './users.component';
+
+describe('UsersComponent', () => {
+  let component: UsersComponent;
+  let fixture: ComponentFixture<UsersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UsersComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/users/users.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-users',
+  template: `
+    <mat-card>
+      <h2>Users</h2>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci hic
+        libero ratione soluta consequuntur quam illum exercitationem aut maiores
+        voluptatem minus quisquam in, eos, et aperiam error ducimus cum officia?
+      </p>
+    </mat-card>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UsersComponent {}

src/index.html

@@ -1,16 +1,22 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>AngularGuards</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-</head>
-<body class="mat-typography">
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Angular Guards - CanActivate</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="mat-typography">
+    <app-root></app-root>
+  </body>
 </html>