permission

THIS PACKAGE IS DEPRECATED

You should be using the @iqmetrix/authorization for any new application. Please, also consider updating you old project to use the new package instead of @iqmetrix/permission.

How to update

To update from @iqmetrix/authorization to @iqmetrix/authorization is very simple and it can be done in 3 steps.

1 - Run the following command into you consolse

npm uninstall @iqmetrix/permission && npm i @iqmetrix/authorization

2 - Find all <Permission> and </Permission> and replace it with <Authorization> and </Authorization> respectively.

2.1 - If you are using the <PermissionToggle> do the same as above and replace it with <AuthorizationToggle>

3 - Find all <PermissionContext> and </PermissionContext> and replace it with <AuthorizationContext> and </AuthorizationContext> respectively.

End of Life

This package will be unpublished from Azure Artifacts on July 1st, 2020. Please, update your app by them or you will not be able to do new deploys.

The old package

This packages offers a Permission wrapper component that wraps an app or a specific component, and exposes permission props to its children via a Context Provider.

It also offers the PermissionToggle (React Functional Component) that verifies your permissions and let you choose the behaviour for when the permission is granted and when is notGranted.

Installation

npm install @iqmetrix/permission

Props

Permission

Name	Type	Required	Default
children	ReactNode	yes	undefined
permissions	string[]	yes	undefined

PermissionToggle

Name	Type	Required	Default
children	{granted: ReactNode, notGranted: ReactNode}	yes	undefined
permissions	string[]	yes	undefined

Interfaces

// The PermissionContext exposes the default state of the Permission component

interface PermissionContext {

isGranted: boolean;

permissions: IPermissionResponse[];

}

// The IPermissionResponse have the expected answer from the API call to the accounts endpoint

interface IPermissionResponse {

Granted: boolean;

Permission: string;

}

Examples

Permission

// To use the component, wrap you app on it

import { Permission } from "@iqmetrix/permission";

<Permission permissions={["myPermission"]}>

<App />

</Permission>;

// In your app, you can consume the context and check any permission

import { PermissionContext } from "@iqmetrix/permission";

const { permissions } = React.useContext(PermissionContext);

<p>

Your permission "{permissions[0].Permission}" has granted value as {permissions[0].Granted ? "true" : "false"}

</p>;

PermissionToggle

import { PermissionToggle } from '@iqmetrix/permission';

// You can pass a React Fragment

<PermissionToggle permissions={['canView']}>

{{

granted: <div>Permission Granted</div>,

notGranted: <div>Permission NOT Granted</div>

}}

</PermissionToggle>

// Or you can pass a React Component/FC

<PermissionToggle permissions={['canEdit']}>

{{

granted: <App />,

notGranted: <Result status="403" />

}}

</PermissionToggle>

Sources

• github
• registry