Check User Permissions for Lightning Web Components

Hi,

Here we are going to learn how we can import user permission Lightning web components. 

It helps us to customize the component's behaviour based on whether the current user has specific permission or not.

It is available from Summer 20 release.

To check a user’s permission assignment,

 import Salesforce permissions from the @salesforce/userPermission and @salesforce/customPermission scoped modules.

To check whether a user has permission, import a static reference to the permission and evaluate whether it’s true or false.

Syntax:

import hasPermission from '@salesforce/userPermission/PermissionName';

Custom permissions can include a namespace. Orgs use namespaces as unique identifiers for their own customization and packages. If the custom permission has a namespace, you must prepend the namespace followed by __ to the permission name.

import hasPermission from '@salesforce/customPermission/PermissionName';
import hasPermission from '@salesforce/customPermission/namespace__PermissionName';

Here "hasPermission" (identifier) is a static reference to indicate that the reference contains a boolean. We can use any name here.

The following example checks whether the current user has the ViewSetup standard permission.

// app.js
import { LightningElement } from 'lwc';
import hasViewSetup from '@salesforce/userPermission/ViewSetup';

export default class App extends LightingElement {
    get isSetupEnabled() {
        return hasViewSetup;
    }

    openSetup(e) {...}
}

If the user has the permission, the component enables a button.

<!-- app.html -->

<template>
    <setup-panel-group>
        <setup-button disabled={isSetupEnabled} onclick={openSetup}></setup-button>
    </setup-panel-group>
</template>

Here "<setup-button>" other component and passing boolean value from other components.

The following sample checks whether the current user has the ViewReport custom permission installed from a managed package with the acme namespace.

// app.js
import { LightningElement } from 'lwc';
import hasViewReport from '@salesforce/customPermission/acme__ViewReport';

export default class App extends LightingElement {
    get isReportVisible() {
        return hasViewReport;
    }
}

If the user has the permission, the component displays the expense-report component.

<!-- app.html -->

<template>
    <common-view></common-view>

    <template if:true={isReportVisible}>
        <c-expense-report></c-expense-report>
    </template>
</template>

Reference:

https://releasenotes.docs.salesforce.com/en-us/summer20/release-notes/rn_lwc_access_permissions.htm?edition=&impact=