/* First create your Service that you want to inject using the custom token */ import {tap, first, map} from 'rxjs/operators'; import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from "@angular/router"; import {Observable} from "rxjs"; import {AuthService} from "./auth.service"; import * as _ from 'lodash'; import {Injectable} from "@angular/core"; @Injectable() export class AuthorizationGuard implements CanActivate { constructor(private allowedRoles:string[], private authService:AuthService, private router:Router) { } canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { return this.authService.user$.pipe( map(user => _.intersection(this.allowedRoles, user.roles).length > 0 ), first(), tap(allowed => { if (!allowed) { this.router.navigateByUrl('/'); } }),); } } /**as you can see the first argument is a string of roles*/ /** Inside the app.module:*/ import {BrowserModule} from '@angular/platform-browser'; import {NgModule, Provider} from '@angular/core'; import {HttpClientModule, HttpClientXsrfModule} from '@angular/common/http'; import {AuthService} from "./services/auth.service"; import {AuthorizationGuard} from "./services/authorization.guard"; //this is the factory function that returns the instance of the Guard: export function createAdminOnlyGuard(authService:AuthService, router:Router) { return new AuthorizationGuard(['ADMIN'], authService, router); } @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, HttpClientModule, ], providers: [ AuthService, { provide: 'adminsOnlyGuard', useFactory: createAdminOnlyGuard, deps: [ AuthService, Router ] } ], bootstrap: [AppComponent] }) export class AppModule { } //usage : import {Routes} from '@angular/router'; import {AdminComponent} from "./admin/admin.component"; export const routesConfig: Routes = [ { path: 'admin', component: AdminComponent, canActivate: ["adminsOnlyGuard"] }, ];
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter