add readme for permissions

This commit is contained in:
Dan Percic 2022-10-11 12:35:03 +03:00
parent c6edb0cd96
commit 25da3de734

View File

@ -0,0 +1,194 @@
```typescript
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,
private http: HttpClient
) {
}
ngOnInit(): void {
const perm = ["can-edit-articles", "can-read-articles"];
this.permissionsService.loadPermissions(perm);
const roles = ["ADMIN", "EDITOR"];
this.permissionsService.loadPermissions(perm);
}
}
```
```angular2html
<div
*iqserPermissions="['ADMIN', 'GUEST']"
(permissionsAuthorized)="yourCustomAuthorizedFunction()"
(permissionsUnauthorized)="yourCustomAuthorizedFunction()"
>
<div>You can see this text congrats</div>
</div>
<ng-template iqserPermissions="ADMIN">
<div>You can see this text congrats</div>
</ng-template>
----------------------------------------------
<ng-template
[iqserPermissions]="['MANAGER']"
[iqserPermissionsThen]="thenBlock"
[iqserPermissionsElse]="elseBlock">
</ng-template>
<ng-template #elseBlock>
<div>elseBlock</div>
</ng-template>
<ng-template #thenBlock>
<div>thenBlock</div>
</ng-template>
----------------------------------------------
<div *iqserPermissions="['THEN_BLOCK']; else elseBlock; then thenBlock">main</div>
<ng-template #elseBlock>
<div>elseBlock</div>
</ng-template>
<ng-template #thenBlock>
<div>thenBlock</div>
</ng-template>
```
```typescript
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'
}
}
}
},
];
```