TypeScript (Developer Preview)
Static Resources
Content Asset Files
SVG Resources
Labels
Internationalization
Current User ID
Current Community
Permissions
Client Form Factor
Mobile-Ready Components
Develop Secure Code
Import Salesforce permissions from the @salesforce/userPermission and @salesforce/customPermission scoped modules. Customize a component’s behavior based on the permissions of the context user.
See the miscPermissionBasedUI recipe in the lwc-recipes repo.
Tip
To check whether a user has a permission, import a static reference to the permission and evaluate whether it’s true or undefined.
1import hasPermission from "@salesforce/userPermission/PermissionName";Checking for a custom permission has a similar syntax. Don’t use a namespace with the permission name if you reference a custom permission from a component in the same namespace as the permission, including the default namespace.
1import hasPermission from "@salesforce/customPermission/PermissionName";If the custom permission was installed from a managed package, prepend the namespace followed by __ to the permission name.
1// For a custom permission installed from a managed package only
2import hasPermission from "@salesforce/customPermission/namespace__PermissionName";The name of the static reference is your choice. We chose the format has{Permission} to indicate that the reference contains a boolean.
This sample checks whether the current user has the ViewSetup standard permission.
1// app.js
2import { LightningElement } from 'lwc';
3import hasViewSetup from '@salesforce/userPermission/ViewSetup';
4
5export default class App extends LightingElement {
6 get isSetupEnabled() {
7 return !hasViewSetup;
8 }
9
10 openSetup(e) {...}
11}If the user has the permission, !hasViewSetup results in the disabled attribute evaluating to false, so the button is not disabled.
1<!-- app.html -->
2<template>
3 <setup-panel-group>
4 <setup-button disabled={isSetupEnabled} onclick={openSetup}></setup-button>
5 </setup-panel-group>
6</template>This sample checks whether the current user has the ViewReport custom permission installed from a managed package with the acme namespace.
1// app.js
2import { LightningElement } from "lwc";
3import hasViewReport from "@salesforce/customPermission/acme__ViewReport";
4
5export default class App extends LightingElement {
6 get isReportVisible() {
7 return hasViewReport;
8 }
9}If the user has the permission, the component displays the expense-report component .
1<!--– app.html -->
2<template>
3 <common-view></common-view>
4
5 <template lwc:if={isReportVisible}>
6 <c-expense-report></c-expense-report>
7 </template>
8</template>Replace any cases where a parent Aura component references permissions dynamically with a static reference in the Lightning web component. The static reference is more efficient because it does not require a network call.
Tip
See Also