How can I hide some part of code in LWC based on profile of the user?

Question

I have code like this:

<template>
<div class="spa-grid-container">
    <!-- Banner -->
    <div class="banner">
        <c-hiring-manager-top-bar hide-create-job-button={hideCreateJobButton}></c-hiring-manager-top-bar>
    </div>

    <!-- Navigation -->
    <div class="navigation" style={navigationBackgroundColor}>
        <c-hiring-manager-navigation portal-configuration={portalConfiguration} selected-page={currentPageUrl}></c-hiring-manager-navigation>
    </div>

</div>

I would like to hide for one profile this part of code:

    <div class="navigation" style={navigationBackgroundColor}>
        <c-hiring-manager-navigation portal-configuration={portalConfiguration} selected-page={currentPageUrl}></c-hiring-manager-navigation>
    </div>

How could I do this?

Answer 1

You can start by getting current logged in user's information. Once you have the Id, you can query the user table using getRecord and getFieldValue functions, finally, add a getter method in your controller, and a template:if tag in your template:

import { LightningElement, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import USER_ID from '@salesforce/user/Id';
import USERPROFILE_OBJECT from '@salesforce/schema/User.Profile.Name';

export default class UserProfile extends LightningElement {

    currentUserProfileName;
    error;

    get userAllowed() {
        return this.currentUserProfileName !== 'Sales Agent';
    }

    @wire(getRecord, { recordId: USER_ID, fields: [USERPROFILE_OBJECT] })
    userDetails({ error, data }) {
        if (data) {
            let profileName = getFieldValue(data, USERPROFILE_OBJECT);
            this.currentUserProfileName = profileName;
        } else if (error) {
            this.error = error;
        }
    }

}

HTML:

<template if:true={userAllowed}>
    <h1>Hidden from specific user</h1>
</template>

Hope it helps!