How to check user permissions in LWC?

What if we wanted to display a LWC page dynamically depending on the user permissions? In LWC we can do that by checking if the user has respective permission and render the page accordingly.

For an example, We wanted to display certain data or records, if the user has viewAllData permission, Then we can import the user permission which gives the value of true or false and use that in the template to render the data. See the example below.

In order to check permissions in LWC we need to import below either ‘@salesforce/userPermission‘ or ‘@salesforce/customPermission‘ modules depending on which permission you wanted to check.

import { LightningElement } from 'lwc';
import hasViewAllData from '@salesforce/userPermission/ViewAllData';

export default class App extends LightingElement {
    get isUserHasViewAll() {
        return hasViewAllData;
    }
}

<template>
   <template lwc:if={isUserHasViewAll}>
        <!-- Display Data-->
 </template>
</template>

You can check the custom permissions by importing the permission in LWC js file.If the custom permission is from a component in the same namespace or default namespace, You don’t need to prefix namespace before custom permission.

import hasPermission from "@salesforce/customPermission/PermissionName";

Only use the namespace if the custom permission has been installed from a Managed Package, Otherwise no need to use the namespace.

/ For a custom permission installed from a managed package only
import hasPermission from "@salesforce/customPermission/namespace__PermissionName";

In Summery. We can render the LWC page dynamically by checking the user permissions.