Role based router permissions

auth.guard.ts

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

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private router: Router,
                private authService: AuthService) {
    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const userRole: string = this.authService.userRole;
        const permission = route.data["permission"];
        
        let canActivate: boolean;

        if (!permission) throw new Error('Permissions is not setup!');
        if (!permission.only.length) throw new Error('Roles are not setup!');

        canActivate = permission.only.includes(userRole);

        if (!canActivate) this.router.navigate([permission.redirectTo]);

        return canActivate;
    }
}


// app.route.ts 
import {Route} from "@angular/router";
import {AuthGuard} from "../_auth/auth.guard";

export const AppRoute: Route = {
    path: "/",
    component: AppComponent,
    canActivate: [AuthGuard],
    data: {
        permission: {
            only: ['user', 'admin'],
            redirectTo: 'signin'
        }
    }
}