Angular Route Guards: CanActivate and CanActivateChild Example

angular-demo
|
|--src
|   |
|   |--app 
|   |   |
|   |   |--authentication
|   |   |    | 
|   |   |    |--services
|   |   |    |    |
|   |   |    |    |--auth.service.ts
|   |   |    |    |--auth-guard.service.ts
|   |   |    |    |--user.ts
|   |   |    |
|   |   |    |--auth.module.ts
|   |   |    |--auth-routing.module.ts 
|   |   |    |--login.component.css
|   |   |    |--login.component.html
|   |   |    |--login.component.ts
|   |   |    |--logout.component.ts
|   |   |    
|   |   |--layout
|   |   |   |
|   |   |   |--dashboard.layout.component.ts
|   |   |
|   |   |--address
|   |   |   |
|   |   |   |--address.component.ts
|   |   |    
|   |   |--article
|   |   |    | 
|   |   |    |--services
|   |   |    |    |  
|   |   |    |    |--article.service.ts
|   |   |    |    |--article.ts 
|   |   |    | 
|   |   |    |--article-list
|   |   |    |    |
|   |   |    |    |--article.list.component.html
|   |   |    |    |--article.list.component.ts
|   |   |    |    |
|   |   |    |    |--edit
|   |   |    |    |   |
|   |   |    |    |   |--article.edit.component.html
|   |   |    |    |   |--article.edit.component.ts
|   |   |    | 
|   |   |    |--article.component.ts
|   |   |    |--article.module.ts
|   |   |    |--article-routing.module.ts
|   |   |   
|   |   |--app.component.ts
|   |   |--app-routing.module.ts
|   |   |--app.module.ts
|   |   
|   |--main.ts
|   |--index.html
|   |--styles.css
|
|--node_modules
|--package.json

interface CanActivate { 
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>|Promise<boolean>|boolean
} 

@Injectable()
export class AuthGuardService implements CanActivate  {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return true;
  }
} 

{
   path: 'home',
   component: DashboardLayoutComponent,
   canActivate: [ AuthGuardService ]
} 

interface CanActivateChild { 
  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable|Promise|boolean
} 

@Injectable()
export class AuthGuardService implements CanActivate, CanActivateChild {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return true;

  }
  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return true;
  }  
} 

path: 'list',
component: ArticleListComponent,
canActivateChild: [ AuthGuardService ],			
children: [
  {
     path: ':id',
     component: ArticleEditComponent
  }
] 

const countryRoutes: Routes = [
  {
    path: 'country',
    component: CountryComponent,
    canActivate: [ AuthGuardService ],
    children: [
      {
        path: '',
        canActivateChild: [ AuthGuardService ],
        children: [
          { path: 'view', component: CountryDetailComponent },
          { path: 'add', component: AddCountryComponent }
        ]
      }
    ]
  }
]; 

export class User { 
  constructor(public userId:number, public username:string, public password:string, public role:string) {
  }
}

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

import { User } from './user';

const USERS = [
	new User(1, 'mahesh', 'm123', 'ADMIN'),
	new User(2, 'krishna', 'k123', 'USER')
];
let usersObservable = of(USERS);

@Injectable()
export class AuthService {
	private redirectUrl: string = '/';
	private loginUrl: string = '/login';
	private isloggedIn: boolean = false;
	private loggedInUser = {} as User;
	getAllUsers(): Observable<User[]> {
		return usersObservable;
	}
	isUserAuthenticated(username: string, password: string): Observable<boolean> {
		return this.getAllUsers().pipe(
			map(users => {
				let user = users.find(user => (user.username === username) && (user.password === password));
				if (user) {
					this.isloggedIn = true;
					this.loggedInUser = user;
				} else {
					this.isloggedIn = false;
				}
				return this.isloggedIn;
			}));
	}
	isUserLoggedIn(): boolean {
		return this.isloggedIn;
	}
	getRedirectUrl(): string {
		return this.redirectUrl;
	}
	setRedirectUrl(url: string): void {
		this.redirectUrl = url;
	}
	getLoginUrl(): string {
		return this.loginUrl;
	}
	getLoggedInUser(): User {
		return this.loggedInUser;
	}
	logoutUser(): void {
		this.isloggedIn = false;
	}
} 

import { Injectable }       from '@angular/core';
import { CanActivate, CanActivateChild, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService }      from './auth.service';

@Injectable()
export class AuthGuardService implements CanActivate, CanActivateChild {
  	
  constructor(private authService: AuthService, private router: Router) {
  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        let url: string = state.url;
	console.log('Url:'+ url);
	if (this.authService.isUserLoggedIn()) {
		return true; 
	}
        this.authService.setRedirectUrl(url);
        this.router.navigate([ this.authService.getLoginUrl() ]);
	return false;
  }
  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        let loggedInUser= this.authService.getLoggedInUser();
	if (loggedInUser.role === 'ADMIN') {
	        return true;		
	} else {
		console.log('Unauthorized to open link: '+ state.url);
		return false;
	}
  }  
} 

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AuthGuardService } from './authentication/services/auth-guard.service';
import { DashboardLayoutComponent } from './layout/dashboard.layout.component';
import { AddressComponent } from './address/address.component';

const routes: Routes = [
	{
		path: '',
		redirectTo: '/article',
		pathMatch: 'full'
	},
	{
		path: '',
		component: DashboardLayoutComponent,
		canActivate: [AuthGuardService],
		children: [
			{
				path: 'article',
				loadChildren: () => import('./article/article.module').then(m => m.ArticleModule)
			},
			{
				path: 'address',
				component: AddressComponent
			}
		]
	},
	{
		path: 'login',
		loadChildren: () => import('./authentication/auth.module').then(m => m.AuthModule)
	}
];

@NgModule({
	imports: [
		RouterModule.forRoot(routes)
	],
	exports: [
		RouterModule
	]
})
export class AppRoutingModule { } 

import { NgModule }   from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { AppRoutingModule }  from './app-routing.module';
import { DashboardLayoutComponent }  from './layout/dashboard.layout.component';
import { AddressComponent }  from './address/address.component';
import { LogoutComponent } from './authentication/logout.component';
import { AuthGuardService } from './authentication/services/auth-guard.service';
import { AuthService } from './authentication/services/auth.service';

@NgModule({
  imports: [     
        BrowserModule,
	AppRoutingModule,
  ],
  declarations: [
        DashboardLayoutComponent,
	AddressComponent,
	LogoutComponent,
        AppComponent
  ],
  providers: [ 
        AuthService,
        AuthGuardService
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { } 

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { ArticleComponent }  from './article.component';
import { ArticleListComponent }  from './article-list/article.list.component';
import { ArticleEditComponent }  from './article-list/edit/article.edit.component';
import { AuthGuardService } from '../authentication/services/auth-guard.service';

const articleRoutes: Routes = [
    { 	  
	  path: '',
	  component: ArticleComponent,
	  children: [ 
		{
		   path: 'list',
		   component: ArticleListComponent,
	           canActivateChild: [ AuthGuardService ],			
		   children: [
			{
			   path: ':id',
			   component: ArticleEditComponent
			}
		   ]			
		}
	  ]
    }
];

@NgModule({
  imports: [ RouterModule.forChild(articleRoutes) ],
  exports: [ RouterModule ]
})
export class ArticleRoutingModule{ } 

import { NgModule }   from '@angular/core';
import { CommonModule }   from '@angular/common';
import { ReactiveFormsModule }    from '@angular/forms';

import { ArticleComponent }  from './article.component';
import { ArticleListComponent }  from './article-list/article.list.component';
import { ArticleEditComponent }  from './article-list/edit/article.edit.component';
import { ArticleService } from './services/article.service';
import { ArticleRoutingModule } from './article-routing.module';

@NgModule({
  imports: [     
        CommonModule,
	ReactiveFormsModule,
	ArticleRoutingModule
  ], 
  declarations: [
	ArticleComponent,
	ArticleListComponent,
	ArticleEditComponent
  ],
  providers: [ ArticleService ]
})
export class ArticleModule { } 

<h3>Login Form</h3>
<div *ngIf="invalidCredentialMsg" ngClass="error">{{invalidCredentialMsg}}</div>
<div>
	<form [formGroup]="loginForm" (ngSubmit)="onFormSubmit()">
	  <p>User Name: <input formControlName="username"></p>
	  <p>Password: <input type="password" formControlName="password"></p>
	  <p><button type="submit">Submit</button></p> 
	</form>
</div> 

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from './services/auth.service';

@Component({
	templateUrl: './login.component.html',
	styleUrls: ['./login.component.css']
})
export class LoginComponent {
	invalidCredentialMsg = '';
	constructor(private authService: AuthService, private router: Router) {
	}
	loginForm = new FormGroup({
		username: new FormControl(),
		password: new FormControl()
	});
	onFormSubmit() {
		let uname = this.loginForm.get('username')?.value;
		let pwd = this.loginForm.get('password')?.value;
		this.authService.isUserAuthenticated(uname, pwd).subscribe(
			authenticated => {
				if (authenticated) {
					let url = this.authService.getRedirectUrl();
					console.log('Redirect Url:' + url);
					this.router.navigate([url]);
				} else {
					this.invalidCredentialMsg = 'Invalid Credentials. Try again.';
				}
			}
		);
	}
} 

:host { 
   position: absolute; 
   background-color: #eaedf2;
   top: 10%;
   left: 5%;
   border: 3px solid black;
}  

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from './services/auth.service';
import { User } from './services/user';

@Component({
    selector: 'logout',
    template: `Logged In: {{loggedInUser.username}} | {{loggedInUser.role}} | 
           <button input='input' (click)="logout()">Logout</button>
	`
})
export class LogoutComponent {
    loggedInUser = {} as User;
    constructor(private authService: AuthService, private router: Router) {
    }
    ngOnInit() {
        this.loggedInUser = this.authService.getLoggedInUser();
    }
    logout() {
        this.authService.logoutUser();
        this.router.navigate([this.authService.getLoginUrl()]);
    }
} 

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { LoginComponent }  from './login.component';

const authRoutes: Routes = [
	{ 
	  path: '',
	  component: LoginComponent
	}
];

@NgModule({
  imports: [ RouterModule.forChild(authRoutes) ],
  exports: [ RouterModule ]
})
export class AuthRoutingModule{ }  

import { NgModule }   from '@angular/core';
import { CommonModule }   from '@angular/common';
import { ReactiveFormsModule }    from '@angular/forms';

import { LoginComponent }  from './login.component';
import { AuthRoutingModule }  from './auth-routing.module';

@NgModule({
  imports: [     
        CommonModule,
	ReactiveFormsModule,
	AuthRoutingModule
  ], 
  declarations: [
        LoginComponent
  ]
})
export class AuthModule { } 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
	<div [ngClass] = "'parent-container'">	
	  <router-outlet></router-outlet>	
	</div>
  `
})
export class AppComponent { 
} 

import { Component } from '@angular/core';
@Component({
  template: `
	<nav [ngClass] = "'parent-menu'">
	  <ul>
		 <li><a routerLink="/article" routerLinkActive="active" >Article</a></li>
		 <li><a routerLink="/address" routerLinkActive="active">Address</a></li>
	  </ul> 
	</nav>  
	<logout></logout>
	<div [ngClass] = "'parent-container'">	
	  <router-outlet></router-outlet>	
	</div>
  `
})
export class DashboardLayoutComponent { 
} 

<h3>Edit Article</h3>
<p *ngIf="article"><b>Article Id: {{article.articleId }} </b></p>
<form [formGroup]="articleForm" (ngSubmit)="onFormSubmit()">
   <p> Title: <input formControlName="title"> </p>
   <p> Category: <input formControlName="category"> </p>
   <p> <button>Update</button> </p>
</form>  

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, Params } from '@angular/router';
import { FormControl, FormGroup } from '@angular/forms';
import { switchMap } from 'rxjs/operators';

import { ArticleService } from '../../services/article.service';
import { Article } from '../../services/article';

@Component({
	templateUrl: './article.edit.component.html'
})
export class ArticleEditComponent implements OnInit {
	article = {} as Article;
	constructor(
		private articleService: ArticleService,
		private route: ActivatedRoute,
		private router: Router) { }

	ngOnInit() {
		this.route.params.pipe(
			switchMap((params: Params) => this.articleService.getArticle(+params['id']))
		).subscribe(article => {
			this.article = article ?? {} as Article;
			this.setFormValues();
		});
	}
	articleForm = new FormGroup({
		title: new FormControl(),
		category: new FormControl()
	});
	setFormValues() {
		this.articleForm.setValue({ title: this.article?.title, category: this.article?.category });
	}
	onFormSubmit() {
		this.article.title = this.articleForm.get('title')?.value;
		this.article.category = this.articleForm.get('category')?.value;
		this.articleService.updateArticle(this.article)
			.subscribe(() =>
				this.router.navigate(['../'], { relativeTo: this.route })
			);
	}
} 

<h3>Article List</h3>
<div *ngFor="let article of articles | async" [ngClass]= "'sub-child-menu'">
  <p>{{article.articleId}}. {{article.title}}, {{article.category}}
     <button type="button" (click)="goToEdit(article)">Edit</button>
  </p>
</div>
<div [ngClass]= "'sub-child-container'">
	<router-outlet></router-outlet>  
</div>  

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Observable } from 'rxjs';

import { ArticleService } from '../services/article.service';
import { Article } from '../services/article';

@Component({
  templateUrl: './article.list.component.html' 
}) 
export class ArticleListComponent implements OnInit { 
  articles: Observable<Article[]>;
  constructor(		
        private articleService: ArticleService,
        private route: ActivatedRoute,
        private router: Router) {
          this.articles = this.articleService.getArticles();
        }
  ngOnInit() {
  }	
  goToEdit(article: Article) {
      this.router.navigate([ article.articleId ], { relativeTo: this.route });
  }
} 

export class Article { 
	constructor(public articleId:number, public title:string, public category:string) {
	}
} 

import { Injectable } from '@angular/core';
import { of } from 'rxjs';
import { map } from 'rxjs/operators';

import { Article } from './article';

const ARTICLES = [
	new Article(1, 'Core Java Tutorial', 'Java'),
	new Article(2, 'Angular Tutorial', 'Angular'),
	new Article(3, 'Hibernate Tutorial', 'Hibernate')
];
let articlesObservable = of(ARTICLES);

@Injectable()
export class ArticleService {
	getArticles() {
		return articlesObservable;
	}
	getArticle(id: number) {
		return this.getArticles().pipe(
			map(articles => articles.find(article => article.articleId === id))
		);
	}
	updateArticle(article: Article) {
		return this.getArticles().pipe(
			map(articles => {
				let articleObj = articles.find(ob => ob.articleId === article.articleId);
				articleObj = article;
				return articleObj;
			}));
	}
} 

import { Component } from '@angular/core';

@Component({
  template: `<h2>Welcome to Article Home</h2>
        <p>Find article <a routerLink="list" routerLinkActive="active">list</a></p>
	<div [ngClass] = "'child-container'">	
	  <router-outlet></router-outlet>	
	</div>
  `
})
export class ArticleComponent { 
} 

import { Component } from '@angular/core';
@Component({
  template: `
          <h3>ADDRESS</h3>
          <p><b> Article: Child routing & Relative navigation </b></p>
	  <p><b> Category: Angular </b></p>
	  <p><b> Website: CONCRETEPAGE.COM </b></p>
  `
})
export class AddressComponent { 
} 

.parent-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
.parent-menu li {
    float: left;
}
.parent-menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 15px 15px;
    text-decoration: none;
}
.parent-menu li a:hover:not(.active) {
    background-color: #111;
}
.parent-menu .active{
    background-color: #4CAF50;
}
.parent-container {
    padding-left: 10px;
}
.child-container {
    padding-left: 10px;
}
.sub-child-container {
    padding-left: 10px;
}
.child-menu  {
    padding-left: 25px;
}
.child-menu .active{
    color: #4CAF50;
}
.sub-child-menu {
    background-color: #f1f1f1;  
    width: 275px;
    list-style-type: none;	
    margin: 0;
    padding: 0;
}
.sub-child-menu .active{
    color: #4CAF50;
}
.error { 
    color: red;
    font-size: 20px;
} 
button {
    background-color: #008CBA;
    color: white;
}