common-ui/src/lib/permissions

import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { IqserPermissionsService } from "./permissions.service";
import { IqserRolesService } from "./roles.service";

@Component({
    templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
    constructor(
        private permissionsService: IqserPermissionsService,
        private rolesService: IqserRolesService
    ) {
    }

    ngOnInit(): void {
        const perm = ["can-edit-articles", "can-read-articles"];
        this.permissionsService.load(perm);

        const roles = ["ADMIN", "EDITOR"];
        this.rolesService.load(roles);
    }
}

<div
    *allow="['ADMIN', 'GUEST']"
    (authorized)="yourCustomAuthorizedFunction()"
    (unauthorized)="yourCustomAuthorizedFunction()"
>
    <div>You can see this text congrats</div>
</div>

<ng-template allow="ADMIN">
    <div>You can see this text congrats</div>
</ng-template>

----------------------------------------------
<div
    *deny="['ADMIN', 'GUEST']"
    (authorized)="yourCustomAuthorizedFunction()"
    (unauthorized)="yourCustomAuthorizedFunction()"
>
    <div>You cant see this text congrats</div>
</div>

<ng-template deny="ADMIN">
    <div>You cant see this text congrats</div>
</ng-template>
----------------------------------------------

<ng-template
    [allow]="['MANAGER']"
    [allowIf]="someObject.isEmpty"
    [allowDeny]="['GUEST']"
    [allowThen]="thenBlock"
    [allowElse]="elseBlock">
</ng-template>

<ng-template #elseBlock>
    <div>elseBlock</div>
</ng-template>

<ng-template #thenBlock>
    <div>thenBlock</div>
</ng-template>

----------------------------------------------

<div *allow="['can-read']; deny: ['GUEST']; if: !someObject.isEmpty; else: elseBlock; then: thenBlock">main</div>

<ng-template #elseBlock>
    <div>elseBlock</div>
</ng-template>

<ng-template #thenBlock>
    <div>thenBlock</div>
</ng-template>

import { IqserRoute } from "./models/permissions-router-data.model";
import { IqserPermissionsGuard } from "./permissions-guard.service";

const appRoutes: IqserRoute[] = [
    {
        path: "home",
        component: HomeComponent,
        canActivate: [IqserPermissionsGuard],
        data: {
            permissions: {
                allow: ["ADMIN", "MODERATOR"],
                redirectTo: "/another-route"
            }
        }
    }
];

const appRoutes1: IqserRoute[] = [
    {
        path: 'dynamic/:id',
        component: HomeComponent,
        canActivate: [IqserPermissionsGuard],
        data: {
            permissions: {
                allow: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
                    if (route.params['id'] === 42) {
                        return ['MANAGER', "UTILS"]
                    } else {
                        return 'ADMIN'
                    }
                }
            }
        }
    }
];

const appRoutes2: IqserRoute[] = [
    {
        path: "home",
        component: HomeComponent,
        canActivate: [IqserPermissionsGuard],
        data: {
            permissions: {
                allow: ["ADMIN", "MODERATOR"],
                redirectTo: {
                    navigationCommands: ["123"],
                    navigationExtras: {
                        skipLocationChange: true
                    }
                }
            }
        },
    }
];

const appRoutes3: IqserRoute[] = [
    {
        path: "home",
        component: HomeComponent,
        canActivate: [IqserPermissionsGuard],
        data: {
            permissions: {
                allow: ["canReadAgenda", "canEditAgenda"],
                redirectTo: {
                    canReadAgenda: "agendaList",
                    canEditAgenda: "dashboard",
                    default: "login"
                }
            }
        }
    }
];

const appRoutes4: IqserRoute[] = [
    {
        path: "home",
        component: HomeComponent,
        canActivate: [IqserPermissionsGuard],
        data: {
            permissions: {
                allow: ["canEditAgenda"],
                redirectTo: {
                    canEditAgenda: {
                        navigationCommands: "dashboard",
                        navigationExtras: {
                            skipLocationChange: true
                        }
                    },
                    default: "login"
                }
            }
        }
    }
];

const appRoutes5: IqserRoute[] = [
    {
        path: 'home',
        component: HomeComponent,
        canActivate: [IqserPermissionsGuard],
        data: {
            permissions: {
                allow: ['canReadAgenda', 'canEditAgenda'],
                redirectTo: {
                    canReadAgenda: (rejectedPermissionName: string, activateRouteSnapshot: ActivatedRouteSnapshot, routeStateSnapshot: RouterStateSnapshot) => {
                        return 'dashboard';
                    },
                    canEditAgenda: (rejectedPermissionName: string, activateRouteSnapshot: ActivatedRouteSnapshot, routeStateSnapshot: RouterStateSnapshot) => {
                        return {
                            navigationCommands: ['/dashboard'],
                            navigationExtras: {
                                skipLocationChange: true
                            }
                        }
                    },
                    default: 'login'
                }
            }
        }
    },
];